CSS 嵌套与层叠

您可能已经注意到，Safari 技术预览版 179 包含对 CSS 嵌套的更新，增加了对新的“宽松解析行为”的支持。

这意味着什么？这意味着您不再需要担心每个嵌套选择器是否以符号开头。这意味着现在像这样的嵌套 CSS 将正常工作

article {
  h1 { 
    font-size: 1.8rem;
  }
  p {
    font-size: 1.2rem;  
  }
}

（如果您没有意识到以前的限制，并对它是什么感到好奇，您可以在 2023 年 2 月发布的今天试用 CSS 嵌套中阅读。但您也可以忽略此限制，因为它很快就会消失。）

这是个好消息。经过数月关于 CSS 嵌套如何工作的争论，我们最终找到了最佳解决方案。最终，浏览器工程师们找到了如何让解析引擎处理嵌套的类型选择器（元素选择器）的方法。

浏览器支持情况如何？2023 年 8 月下旬，Firefox 117 发布了对嵌套的支持，从一开始就使用了宽松解析行为。Safari 16.5 于 2023 年 5 月发布了嵌套的原始版本，而 Safari 技术预览版 179 则于 2023 年 9 月更新到了宽松解析行为。Chrome 正在此问题中跟踪他们的即将到来的更新。

顺便说一下，任何用 & 编写的代码将继续有效。事实上，& 是编写像这样 CSS 的重要工具

ul {
  padding-left: 1em;
  article & {
    padding-left: 0;
  }
}

这等同于

ul {
  padding-left: 1em;
}
article ul {
  padding-left: 0;
}

& 提供了一种表达“我希望嵌套选择器放在这里”的方式。它仍然做着同样的工作，只是在元素选择器之前不再需要它了。

另一个问题

关于 CSS 嵌套，还有一件事仍在争论中。如果我们很快做出改变，我们仍然有时间。

让我们问您一个问题。如果您编写了以下嵌套 CSS，您希望文章文本是什么颜色？

article {
  color: blue;
  @supports (text-shadow: 0 0) {
    color: red;
  }
  color: yellow;
}

您希望它产生这种非嵌套等效结果，选项 1，即 color: red 胜出吗？

article {
  color: blue;
  color: yellow; 
}
@supports (text-shadow: 0 0) {
  article {
      color: red;
  }
}

或者您希望它计算为这种等效结果，选项 2，即 color: yellow 胜出吗？

article {
  color: blue;
}
@supports (text-shadow: 0 0) {
  article {
      color: red;
  }
}
article {
  color: yellow; 
}

目前，嵌套规范规定选项 1 是正确的，因此浏览器中也是这样实现的。所有预处理器都以这种方式工作：Less (演示)、Sass (演示)、Stylus (演示)、PostCSS (演示) 等等。也许与超过十五年的第三方工具保持一致是最好的选择。

但许多人认为这是一个意想不到的陷阱，因为它似乎重新排序了样式。它使层叠中靠前的样式覆盖了靠后的样式。这些人期望选项 2 是它的工作方式，即层叠的基本原理保持完全不变——当两个声明具有相同的特异性时，后者总是胜出。

我们进行了一项调查，以了解您的需求。结果在最初的 48 小时内表现出惊人的一致性。

选项 1：38%
选项 2：62%

您的输入有助于 CSS 工作组就此类代码应如何工作做出最终决定。目前尚不完全清楚选项 2 是否可行，但在深入探究之前，了解 Web 开发人员的需求会有所帮助。

感谢您的参与！