为什么 CSS 没有后代分组功能？

为什么 CSS 选择器缺乏后代分组功能

在 CSS 中，为一组嵌套元素分配样式可能很麻烦。考虑一个 HTML 表格，您想要在其中设置所有列标题和单元格的样式。您必须使用以下选择器：

<code class="css">#myTable th, #myTable td {}</code>

使用如下语法似乎是合乎逻辑的：

<code class="css">#myTable (th, td) {}</code>

历史背景

但是，这样的语法并不存在，因为直到 2008 年才以 :any() 伪类的形式提出建议。

早期浏览器实现

Mozilla 在 2010 年首次将其实现为 :-moz-any()：

<code class="css">#myTable :-moz-any(th, td) {}</code>

WebKit 提出了与 :-webkit-any() 类似的方法：

<code class="css">#myTable :-webkit-any(th, td) {}</code>

但是，使用这两个前缀都需要复制规则集，从而使代码变得多余。

现代提案

选择器级别 4 草案引入了 :matches():

<code class="css">#myTable :matches(th, td) {}</code>

此提案仍在开发中，限制了浏览器支持。

表格样式的解决方法

对于表格，您可以使用通用选择器 * 来定位 th 和td 元素：

<code class="css">#myTable tr > * {}</code>

为了提高性能，您可能仍然更喜欢较长的形式。

以上是为什么 CSS 没有后代分组功能？的详细内容。更多信息请关注PHP中文网其他相关文章！