我可以让这个 CSS 更简单以避免重复父选择器吗？

Question

我遇到的一个常见模式如下：

form.request input {
    /* ... */
}

form.request input[type="text"] {
    /* ... */
}

form.request select {
    /* ... */
}

form.request br {
    /* ... */
}

我有几行以相同的选择器 (form.request) 开头，并且我想选择不同的子项。我可以以一种更简洁的方式做到这一点，而不需要重复（最好没有像 LESS 这样的额外依赖项）？

相关问题 - 如果以上所有评论都包含相同的样式，我可以做得更好吗：

form.request input, form.request input[type="text"], form.request select, form.request br {
    /* ... */
}

Answer 1

不，你不能。但如果您想减少打字并使样式表更具可读性，请考虑使用 SCSS。

Answer 2

使用LESS，这可以让你写

form.request {
  input { /* ... */ }
  input[type="text"] { /* ... */ }
  select { /* ... */ }
  br { /* ... */ }
}

，甚至

form.request {
  input {
    /* ... */
    &[type="text"] { /* ... */ }
  }
  select { /* ... */ }
  br { /* ... */ }
}

Answer 3

还没有 - 或者没有额外的依赖项。

事实上，有一个 CSS 嵌套模块的 W3C 工作草案 - 然而，< a href="https://caniuse.com/css-nesting" rel="nofollow noreferrer">尚无浏览器支持此功能。

如果您愿意使用 PostCSS，这里有一个 可用插件，因此您现在就可以开始使用此功能 - 该插件将扩展嵌套选择器（类似于 SASS或 LESS）到当今浏览器中工作的重复选择器中。

PostCSS 使许多其他 CSS 功能能够在旧版浏览器中工作。使用未来 CSS 功能的风险在于它们的最终形式可能会有所不同 - 或者就这一点而言，可能永远不会实现。另一方面，使用不断发展的标准，如果它最终由浏览器实现，那么您很可能比使用 SASS 或 LESS 更接近最终形式的功能。

请注意，语法与 SASS 或 LESS 相似但不同。

您可能还需要考虑 IDE 支持的问题。例如，有一个 VS Code 插件可用，它确实支持当前形式的 CSS 嵌套模块 - 但是，根据您选择的 IDE，PostCSS 插件可能可用也可能不可用，并且可能支持也可能不支持某些功能。