0

Is it possible to simplify the following css rule so that I do not have to duplicate the class selector .simpleTable.cellBorders for all elements (td and th)?

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

The idea is that td and th cells have a border if the table has the classes simpleTable and cellBorders assigned like:

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

2 回答 2

6

您当然可以将通用选择器 (*) 与子选择器 (>) 一起使用，因为除此之外没有其他有效元素th，并且td可能位于 a 内tr：

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

请注意，在和之间放置另一个子选择器.simpleTable.cellBorders不会tr按预期工作，因为浏览器（至少是 Firefox）将在元素及其元素tbody之间添加一个元素，正如HTML 4.01 标准和HTML5 标准所定义的那样：tabletr

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

于 2013-04-30T14:01:39.520 回答
-1

看看这个 ：

.simpleTable tr > *{
    border: 1px #ccc solid;
}
于 2013-04-30T14:13:08.707 回答