CSS選擇rowgroup元素，但不是非rowgroup元素

Question

我有一些表是這樣的：

<tr> 
    <th scope="rowgroup" rowspan="2">Rowgroup</th> 
    <th scope="row">Row 1</th> 
    <td>A</td> 
</tr> 
<tr> 
    <th scope="row">Row 2</th> 
    <td>B</td> 
</tr> 

我想一般的CSS規則來捕獲所有範圍=「行」的元素時，rowgroup的一部分，但未時，他們沒有這樣的rowgroup的一部分：

<tr> 
    <th scope="row">Row 1</th> 
    <td>A</td> 
</tr> 
<tr> 
    <th scope="row">Row 2</th> 
    <td>B</td> 
</tr> 

我的目標是讓所有我的TH的一種顏色，除rowgroup當一部分。我試過，但它只能轉換第一個：

th[scope="rowgroup"] th { color: blue; } 

我不關心瀏覽器的兼容性和使用許多規則是好的，我只是想避免使用ID或類選擇，或者如果可能的JavaScript。

Answer 1

恐怕你不能做到這一點與簡單的CSS。

問題是，CSS不支持「向上」，只會「向下」。在你的第一個例子中，將不可能到達位於第二個tr的th，它們是th scope="rowgroup"元素的「堂兄弟」，所以你必須先上去然後下去。

使用Javascript/jQuery很容易解決，或者您可以在包含th scope="rowgroup"的tr的HTML中添加一個類。

Answer 2

中庸之道用作CSS代碼：

th {color:blue;} 
th[scope="rowgroup"] { color: red; } 

演示：http://jsfiddle.net/H4Hy9/1/