用于后代分组的难以捉摸的 CSS 选择器

虽然 CSS 为样式元素提供了强大的选项，但一个值得注意的缺失是轻松对后代进行分组的能力。当对 HTML 表格等复杂元素进行样式设计时，这种限制变得很明显，其中为列标题和单元格分配相同的样式需要繁琐的选择器。

后代样式设计的困境

考虑下面的表示例：

  ...
  

要使用单个选择器设置标题和单元格的样式，通常会使用：

#myTable th, #myTable td {}

但是，在处理大量元素时，这种方法显得冗长乏味。

(th, td)选择器：错过的机会

更直观的语法是使用类似于以下的分组选择器：

#myTable (th, td) {}

不幸的是，CSS 中不存在这样的语法。

Pre-2008 的徒劳提案

事实证明，缺乏后代分组选择器一直是一个长期问题。早期尝试引入一个伪类，例如 2008 年提出的 :any() 伪类，但没有获得关注。

最近的发展和一线希望

然而，选择器级别 4 工作草案重新引入了分组伪类 :matches() 的概念。虽然此提案显示出希望，但浏览器支持仍有很长的路要走。

替代解决方案

同时，有一些针对后代分组的解决方法：

• 使用 * 选择器：

  #myTable tr > * {}

  （请注意，这假设 tr 元素仅包含 td 或 th 元素，而不包含其他元素）

• 坚持使用详细的 th、td 方法以获得最大性能

结论

CSS 中缺乏后代分组选择器多年来一直存在的问题。尽管最近的提议带来了一线希望，但广泛的浏览器支持仍然难以实现。在那之前，开发人员必须依赖替代方法，或者接受现有 th、td 选择器的冗长。