Question

这可能是一个非常愚蠢的问题，但我找不到任何东西，而且看起来很明显：与SASS一样可以嵌套CSS吗？

例如，我想在某个页面上定义h1标记，所以我写道：

body.certain_page h1 {
  font-size: 12px;
}

到目前为止一切顺利。如果我希望这种风格适用于多个页面，我会写：

body.certain_page h1, body.other_page h1 {
  font-size: 12px;
}

现在，当你以这种方式定义很多规则时，它会非常累人。写这样的东西要容易得多：

body.certain_page, body.other_page {
  h1 {
    font-size: 12px;
  }
}

像媒体查询一样。为什么这不可能？或者我错过了什么？

Answer 1

不，现在不可能，这就是SASS将嵌套列为功能的原因。

Answer 2

好吧，正如@destroy已经回答的那样，你不能使用CSS嵌套选择器，这就是开发人员选择LESS和SASS预处理器的原因。你可以做的最好的事情是最小化CSS是我的分组常见属性，如

div, p, i {
   color: #f00;
   /* All the three elements will have the same color */
}

您还可以在父选择器中声明基本属性，以便可以轻松地继承它们，并且您不必在每个选项上反复调用它们。

body {
   font-size: 14px;
   font-family: Arial;
   color: #515151;
}

上述属性很容易通过p之类的元素继承，因此您不必每次都声明font-family或font-size，除非您希望拥有通过使用更具体的选择器（如

）可以覆盖特定元素的不同font-family

.class_name p {
   font-family: Open Sans, Arial;
}

你有通用的选择器，它也可以缓解冗长的选择器，比如你想要color red嵌套在一个名为.class_name的类的特定元素中的所有元素而不是做

<击>

.class_name p, .class_name div, .class_name fieldset {
   /* This is really bad */
}

<击>

相反，您可以将上述内容写为

.class_name * {
   /* Much better */
}

结论：学习CSS选择器，这是你能想到的唯一方法 out，你可以自己优化你的CSS，而选择器完全取决于DOM，所以没有预定义的技术，但你应该保持选择器简单，不要过于复杂，否则你会最终写出越来越多的具体规则，这将导致更多 100行蹩脚的CSS ...

另外，here's是谷歌的一个方便工具，您可以随时使用它来优化性能。

Answer 3

使用CSS选择器4，:matches伪类：

可以实现类似的功能

:matches(body.certain_page, body.other_page) h1 { ... }

它已经在Webkit / Blink和基于Gecko的浏览器中可用（分别为:-webkit-any()和:-moz-any()），但仅作为实验性功能。在大多数浏览器采用CSS Selectors 4之前，使用CSS预处理器似乎是防止编写CSS时出现这种自我重复的唯一解决方案。