为什么不能在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

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

#myTable (th,td) {}

很简单,因为没有人打算提出一个有用的语法...直到最近(相对于你发布此版本的时间)到2008年,作为一个:any()伪类.稍后对此进行了更深入的讨论.

第一个实现从Mozilla出现,虽然最晚到2010年,其幌子是:-moz-any():

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

次年,它会被认为WebKit的跟风,具有:-webkit-any():

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

但是如果你现在尝试将两个前缀放在一起,那么由于选择器解析规则,你必须复制规则集,使你的代码更长,并且无法实现伪类的预期目的:

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

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

新的选择者4级工作草案有一个基于原始提案的:matches()伪类:any()提案,但随着草案的修订可能会看到某些增强:

#myTable :matches(th, td) {}

当然,因为它是一个新的草案,所以不要期望浏览器支持到很晚.

在样式化th和td元素的非常具体的情况下,您可以使用此*假设tr此表中的所有元素都不包含除单元格元素之外的子元素,例如script或template:

#myTable tr > * {}

但如果你是一个表演迷并且讨厌*选择器,你将不得不坚持做很长时间.

Answer 2

除了使用 W3C 之外，您还可以使用 jQuery 来完成类似的事情

$('#myTable').find('tr, td');

当然，JS 并不总是启用的，依赖它也不是一个好主意。您只需列出所有选择器即可！