为什么你不能在CSS选择器中分组后代？

如果你想为一组后代分配相同的风格，为什么没有一种简单的方法来用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, #myTable td {}

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

#myTable (th,td) {}

来源

2009-04-29 eft

如果你想要的是语法，你可以扩展你的编辑器将自动扩大到符合标准的形式。 – 2009-04-29 07:07:25

短与W3C服用它，你可以使用jQuery一个类似的这种事情

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

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

来源

2009-04-29 03:48:50 alex

@alex - tx，我想知道什么是历史/理由是排除了这种类型的事情在CSS – eft 2009-04-29 03:50:24

可能只是W3C的做事有点滑稽......他们做了一点。 – alex 2009-04-29 03:52:30

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

请参阅MDN reference关于此，W3C recommendation关于:matches()伪属性。

干杯！

来源

2011-09-18 17:30:36 kunambi

为什么没有类似于以下的语法？
#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) {}

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

使用的新选择4级工作草案有一个:matches() pseudo-class的建议，这是在原有基础上:any()提议，但可能会看到某些增强的草案修订：

#myTable :matches(th, td) {}

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

在造型既th和td元素的非常具体的情况下，你可以使用*而不是假设，没有任何tr元素在该表中都不会包含除电池元件别的孩子，比如script或template：

#myTable tr > * {}

但是，如果你是一个表现瘾君子并且厌恶*选择器，那么你必须坚持这么做。

来源

2012-08-02 21:31:20 BoltClock

你可能要考虑SASS - http://sass-lang.com

它可以让你以更合理的方式（类似于你的建议）写CSS，但仍TI编译到普通的旧的CSS。

例如：

#myTable{ 
    background: #CCC; 

    tr{ 
     border: 1px solid #EEE; 
    } 

    td{ 
     background: blue; 
    } 
}

来源

2012-08-02 21:47:48

为什么你不能在CSS选择器中分组后代？

回答

相关问题