CSS可以嵌套吗（就像SASS一样）？答案

【问题标题】：Is nesting possible with CSS (like it is with SASS)?CSS可以嵌套吗（就像SASS一样）？
【发布时间】：2013-11-06 10:22:44
【问题描述】：

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

比如我想在某个页面上定义一个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;
  }
}

就像一个媒体查询。为什么这是不可能的？还是我错过了什么？

【问题讨论】：

标签： html css sass

【解决方案1】：

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

【讨论】：

哈哈我正要回答，砰的一声，我的短了，它是NO，这是不可能的............
那会很有帮助吗？你知道为什么还没有介绍吗？或者可能的解决方法/技巧让我的生活更轻松？谢谢！
不可能还：它目前被起草为 CSS Hierarchies Module Level 3，因此它有可能在某个时候登陆 Chrome。草案本身目前是 404，但你可以阅读更多（这里）。[drublic.de/blog/tag/preprocessors/] Still, SASS FTW。

【解决方案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 选择器，这是你唯一能理解的方法出来，你可以自己优化你的 CSS，而选择器完全依赖于 DOM，所以没有预定义的技术，但你应该保持选择器简单，不要过于复杂，否则你会最终编写越来越具体的规则，这将导致更多 100 行糟糕的 CSS...

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

【讨论】：

像.class_name * 这样的选择器不利于性能，因为它们会导致浏览器在any 元素的祖先链中搜索具有class_name 类的元素。跨度>
好吧，星级并没有那么糟糕，至少对于普通网站来说，如果你的网站是基本的，它们永远不会对性能造成巨大影响，像 facebook google 这样的高流量网站在这里很重要，即使 SO 使用 .spoiler:hover * ..是的，这很糟糕，但这取决于，我倾向于使用*重置margin，padding，outline，box-sizing
我认为 .class_name > * 会是一个更好的选择，并不是说它是一个好选择但可能比 .class_name * 更好

【解决方案3】：

使用 CSS 选择器 4，:matches 伪类也可以实现类似的功能：

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

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

【讨论】：