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

回答