为什么可以'；你不能在CSS选择器中分组子体吗？

如果您想将相同的样式分配给一组子体，为什么没有一种简单的方法可以使用CSS来实现呢

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

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

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

#myTable（th，td）{

除了W3C之外，您还可以使用jQuery实现类似的功能

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

---

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

您可以使用特定于供应商的

-moz-any（）

和

-webkit-any（）

对选择器进行分组

请参阅此上的，以及

：matches（）

伪属性上的

干杯

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

#myTable（th，td）{

很简单，因为没有人愿意提出一个有用的语法。。。直到最近（相对于你发布这篇文章的时间）2008年，作为一个整体。对此进行了更深入的讨论

Mozilla的第一个实现出现了，尽管最晚出现在2010年，其伪装是：

#myTable:-moz any（th，td）{

次年：

#myTable:-webkitany（th，td）{

但是，如果您现在试图同时使用这两个前缀，那么您将不得不复制规则集，从而使代码变得更长，并破坏伪类的预期用途：

#myTable:-moz any（th，td）{
#myTable:-webkit任意（th，td）{}

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

新的选择器4级工作草案有一个a提案，该提案基于原始的

：any（）

提案，但随着草案的修订，可能会看到某些增强：

#myTable:matches（th，td）{

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

在设置

th

和

td

元素样式的非常特殊的情况下，您可以使用

*

而不是假设此表中的

tr

元素都不会包含单元格元素以外的子元素，例如

script

或

template

：

#myTable tr>*{}

---

但是如果你是一个性能迷，并且讨厌

*

选择器，那么你将不得不长期坚持使用它。

你可能需要研究SASS-

它允许您以更合理的方式编写CSS（类似于您建议的方式），但ti仍然可以编译成普通的旧CSS

例如：

#myTable{
    background: #CCC;

    tr{
      border: 1px solid #EEE;
    }

    td{
      background: blue;
    }
}

---

@alex-tx，我想知道在CSS中排除这类事情的历史/理由是什么可能只是W3C做的事情有点滑稽。。。如果你想使用这种语法，你可以扩展你的编辑器，使其自动扩展到符合标准的表单。最新的W3C选择器建议是3级，而不是4级。Selectors4在您发布此内容时刚刚进入早期草稿。