我们如何在 CSS 选择器中对后代进行分组？

在 CSS 选择器中对后代进行分组

尽管通常需要对后代组进行样式化，但 CSS 缺乏执行此任务的直接方法。考虑一个简单的 HTML 表格：

`

<th></th>
<th></th>
<th></th>

.
.
.

<td></td>
<td></td>
<td></td>

`

传统上，设置所有列标题和单元格的样式需要详细选择器：

#myTable th, #myTable td {}

为什么我们不能使用这样的语法：

#myTable (th,td ) {}

建议的解决方案

直到最近，还没有在 CSS 选择器中对后代进行分组的标准解决方案。然而，已经提出了以下伪类：

• :-moz-any()：由 Mozilla 于 2010 年引入。
• ： -webkit-any()：建议用于 WebKit 浏览器，但并未广泛采用。

但是，使用这些带前缀的选择器需要复制规则集，不建议用于面向公众的代码。

未来发展

选择器级别 4 工作草案基于原始 :any() 提案提出了 :matches() 伪类。这个新的伪类可能会在未来的修订中提供增强功能。

解决方法

对于 th 和 td 元素样式的特定情况，可以使用 * 选择器：

#myTable tr > * {}

这假设 tr 元素仅包含单元格元素。然而，对于注重性能的开发人员来说，这仍然不如详细方法有效。

以上是我们如何在 CSS 选择器中对后代进行分组？的详细内容。更多信息请关注PHP中文网其他相关文章！