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

Question

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

.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

您当然可以将通用选择器（*）与子选择器（＆gt;）一起使用，因为除th和td之外没有其他有效元素可以在{{1}内}}：

tr

请注意，在.simpleTable.cellBorders tr>* { border: 1px #ccc solid; } 和.simpleTable.cellBorders之间放置另一个子选择器将无法正常工作，因为浏览器（至少是Firefox）会在tr之间添加tbody元素元素及其table元素，由HTML 4.01 standard以及HTML5 standard定义：

  

在text / html中标记省略：       如果tbody元素中的第一个元素是tr元素，并且该元素不是，则可以省略tbody元素的开始标记   紧跟在tbody，thead或tfoot元素之后的结尾标记   已被省略。 （如果元素为空，则不能省略。）

Answer 2

看看这个：

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