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>

2013-04-30 James

如果我明白你的问题，为什么不只是做.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

你当然可以使用通用选择器（*）连同子选择器（>），因为有除了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元素，其末尾标记已被省略。（可如果是空元素不能省略。）

2013-04-30 14:01:39

-1

看看这个：

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

2013-04-30 14:13:08 hafid2com

回答