如何使用多个元素选择器简化多个元素的css规则

Question

是否可以简化以下css规则,以便我不必.simpleTable.cellBorders为所有元素(td和th)复制类选择器？

.simpleTable.cellBorders td, .simpleTable.cellBorders th {
    border: 1px #ccc solid;
}

这个想法是,如果表具有类simpleTable并且cellBorders分配如下,则td和th单元格具有边框:

<table class="simpleTable cellBorders">
    <tr><th>My Header</th> ... </tr>
    <tr><td>Some cell</td> ... </tr>
</table>

Answer 1

您当然可以将通用选择器(*)与子选择器(>)一起使用,因为除此之外没有其他有效元素th,td它可以位于tr:

.simpleTable.cellBorders tr>* {
    border: 1px #ccc solid;
}

请注意,在浏览器(至少是Firefox)之间放置另一个子选择器.simpleTable.cellBorders并且tr将无法正常工作,因为HTML 4.01标准以及HTML5标准定义tbody了table元素及其tr元素之间的元素:

text/html中的标记省略:如果tbody元素中的第一个元素是tr元素,并且如果元素不是紧跟在其末尾标记的tbody,thead或tfoot元素之后,则可以省略tbody元素的开始标记省略.(如果元素为空,则不能省略.)