如果您想为一组后代分配相同的样式，为什么没有一种简单的方法来使用 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) {}
【问题讨论】：
标签： css css-selectors
为什么没有类似下面的语法？
#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 > * {}
但是，如果您是性能迷并且讨厌 * 选择器，那么您将不得不长期坚持下去。
【讨论】：
您可以使用供应商特定的-moz-any() 和-webkit-any() 对选择器进行分组。
请查看MDN reference 和W3C recommendation :matches() 伪属性。
干杯！
【讨论】：
你可能想研究一下 SASS - http://sass-lang.com
它允许您以更明智的方式编写 CSS（类似于您建议的方式），但 ti 仍然可以编译为普通的旧 CSS。
例如：
#myTable{
background: #CCC;
tr{
border: 1px solid #EEE;
}
td{
background: blue;
}
}
【讨论】：
不考虑 W3C，你可以使用 jQuery 来做类似的事情
$('#myTable').find('tr, td');
当然，JS 并不总是启用的，依赖它也不是一个好主意。您只需要列出所有选择器！
【讨论】：