Howto简化多个类选择器的多个元素的css规则
问题描述:
是否可以简化以下css规则,以便我不必为所有元素(td和th)复制类选择器.simpleTable.cellBorders
?Howto简化多个类选择器的多个元素的css规则
.simpleTable.cellBorders td, .simpleTable.cellBorders th {
border: 1px #ccc solid;
}
的想法是,TD和TH细胞具有边框,如果表中有分配了类似的simpleTable
和cellBorders
类:
<table class="simpleTable cellBorders">
<tr><th>My Header</th> ... </tr>
<tr><td>Some cell</td> ... </tr>
</table>
答
你当然可以使用通用选择器(*)连同子选择器(>),因为有除了th
和td
没有其他有效的元素,可能是里面tr
:
.simpleTable.cellBorders tr>* {
border: 1px #ccc solid;
}
注意,如预期将.simpleTable.cellBorders
和tr
之间的另一个子选择器将无法正常工作,如浏览器(至少火狐)将添加table
元素及其tr
元素之间的tbody
元素,由HTML 4.01 standard以及定义为HTML5 standard:在text/html的
标签遗漏: 一个tbody元素的开始标记可以,如果tbody元素中的第一件事情是一个TR元素被省略,如果元素没有 立即被TBODY前面,THEAD,或tfoot元素,其末尾标记 已被省略。 (可如果是空元素不能省略。)
答
看看这个:
.simpleTable tr > *{
border: 1px #ccc solid;
}
如果我明白你的问题,为什么不只是做.simpleTable TR,.simpleTable TR日{/ * **你的代码**** /} – Cam 2013-04-30 13:57:54
CSS4允许你像这样操作'.simpleTable.cellBorders:-webkit-any(td,th){}'。 http://jsfiddle.net/ygKj9/。 Mozilla也支持它。 IE没有。 – dfsq 2013-04-30 14:02:18
@dfsq:-webkit-any选择器将被称为:CSS4中的matches()。感谢提示。 – James 2013-04-30 14:11:24