为什么你不能在CSSselect器中分组后代？

如果你想为一组后代赋予相同的风格，为什么没有一个简单的方法来做到这一点与CSS？

假设你有一个HTML表格，如下所示：

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

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

 #myTable th, #myTable td {}

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

 #myTable (th,td) {}

为什么没有类似于以下的语法？
 #myTable (th,td) {} 

很简单，因为没有人打算提出一个有用的语法…直到最近（相对于你发布这个时间的那个），如2008年，作为:any()伪类。稍后再深入讨论这个问题。

第一个实现浮出水面的Mozilla，虽然迟到2010年，幌子:-moz-any() ：

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

第二年，会build议WebKit跟随，与:-webkit-any() ：

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

但是，如果您现在要尝试使用两个前缀，那么由于select器分析规则，您将不得不复制规则集 ，使代码更长，并且破坏了伪类的预期目的：

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

这使得在公共代码中使用前缀select器几乎毫无意义。除了特定于供应商的代码之外，我不能看到他们的合法用途，这意味着您可能不会在同一个样式表中使用它们。

新的select器4级工作草案提出了一个基于原始:any()提案的:matches()伪类，但在草案修订时可能会看到某些增强：

 #myTable :matches(th, td) {}

当然，因为这是一个新的草案，不要期待浏览器的支持，直到很久以后。

在样式化th和td元素的特定情况下，可以使用*来代替，假设此表中没有tr元素将包含除单元格元素（如script或template以外的子元素：

 #myTable tr > * {}

但是，如果你是一个performance瘾君子，并且讨厌*select器，那么你就不得不坚持这么做。

您可以使用特定于供应商的-moz-any()和-webkit-any()对select器进行分组。

请参阅关于此的MDN参考，以及关于:matches()伪属性的W3Cbuild议。

干杯!

你可能想看看SASS – http://sass-lang.com

它允许您以更明智的方式编写CSS（类似于您的build议），但是仍然会编译成简单的旧CSS。

例如：

 #myTable{ background: #CCC; tr{ border: 1px solid #EEE; } td{ background: blue; } }

与W3C接轨，你可以使用jQuery类似的东西

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

当然，JS并不总是被启用，依靠这个并不是一个好主意。你只需要列出所有的select器！