0

这可能是一个非常愚蠢的问题，但我找不到任何东西，而且看起来很明显：使用 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;
  }
}

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

4

3 回答 3

6

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

于 2013-10-24T15:10:18.417 回答
4

好吧，正如@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-familyor font-size，除非您想font-family为特定元素设置不同的属性，可以通过使用更具体的选择器（如

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

你确实有通用选择器，它也可以简化冗长的选择器，比如说你想要color red嵌套在一个特定元素内的所有元素都有一个名为.class_nameso 而不是这样做

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

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

.class_name * {
   /* Much better */
}

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

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

于 2013-10-24T15:13:23.180 回答
2

:matches使用 CSS Selectors 4，伪类可以实现类似的功能：

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

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

于 2013-10-24T15:21:09.643 回答