css - 为什么不能在 CSS 选择器中对后代进行分组？

Question

如果您想将相同的样式分配给一组后代，为什么没有使用 CSS 实现此目的的简单方法？

假设您有一个如下所示的 HTML 表格:

<table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  .
  .
  .
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

为什么必须使用以下选择器设置所有列标题和单元格的样式？

#myTable th, #myTable td {}

为什么没有类似下面的语法？

#myTable (th,td) {}

Answer 1

Why isn't there a syntax similar to the following?

#myTable (th,td) {}

很简单，因为没有人愿意提出一个有用的语法......直到最近(相对于你发布这篇文章的时间)作为 2008 年，作为 :any() pseudo-class .对此进行了更深入的讨论 a little later .

第一个实现从 Mozilla 浮出水面，尽管是在 2010 年，以 :-moz-any() 的名义出现:

#myTable :-moz-any(th, td) {}

次年，it would be suggested that WebKit follow suit , 与 :-webkit-any() :

#myTable :-webkit-any(th, td) {}

但是如果您现在尝试同时使用这两个前缀，那么 due to selector parsing rules您将不得不复制规则集，使您的代码甚至更长并破坏伪类的预期目的:

#myTable :-moz-any(th, td) {}
#myTable :-webkit-any(th, td) {}

这使得在面向公众的代码中使用带前缀的选择器几乎毫无意义。除了特定于供应商的代码之外，我看不到它们在任何地方的合法用途，这意味着您可能不会在同一个样式表中一起使用它们。

新的 Selectors 4 级工作草案有一项关于 :matches() pseudo-class 的提案，它基于原始的 :any() 提案，但随着草案的修订，可能会看到某些增强功能:

#myTable :matches(th, td) {}

当然，因为它是一个新草案，所以不要指望浏览器支持要等很久以后。

在为 th 和 td 元素设置样式的非常具体的情况下，您可以使用 * 而不是假设 此表中的 tr 元素将永远包含单元格元素以外的子元素，例如 script 或 template:

#myTable tr > * {}

但是如果你是一个性能迷并且讨厌 * 选择器，你将不得不长期坚持使用它。