CSS 嵌套放宽语法更新

Chrome 120 中启用了先行嵌套。

Adam Argyle

今年早些时候，Chrome 在 112 中推出了 CSS 嵌套，现在，它已内置于各大主流浏览器中。

不过，无效嵌套示例的第一篇文章中列出了该语法有一项严格要求，而且这些要求可能不尽人意。本后续文章将介绍从 Chrome 120 开始，规范中发生的变化。

嵌套元素标记名称

第一版 CSS 嵌套语法中最令人惊讶的限制之一是，无法嵌套裸元素标记名称。这种功能已被移除，使得以下 CSS 嵌套有效：

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

嵌套有序列表、无序列表或定义列表时，这种方法非常实用：

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

进行了哪些更改以允许此嵌套？

这在很大程度上要归功于 Chrome 工程师的一些探索和原型设计，以及社区和 CSS 工作组的期望。

有很多人怀疑，CSS 解析器是否可以用来区分标记名称 (div) 和属性名称 (visibility)，因为解析器目前没有前进的概念。为了了解该令牌是一个属性，浏览器需要往前看，并查看 : 是否跟随该未知令牌。因此，在原始规范中，& 符号用于向浏览器表明后面是嵌套的内容，而不是常规的 CSS 属性和值。

幸运的是，工程师发现，当解析器未能按照正常的使用传递将嵌套选择器解析为属性时，该选择器可能会在假定选择器而不是属性的模式中重启。解析会恢复，并将嵌套确认为选择器嵌套。它足够快速、可靠，已确定足够高的速度来发布语法。