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规则在行组的一部分时捕获所有scope =“row”元素，但是当它们不是像这样的行组的一部分时，它不会：

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

我的目标是让所有TH都是一种颜色，除非是行组的一部分。我尝试了这个，但它只抓住了第一个：

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

我不关心浏览器兼容性并且使用很多规则很好，我只是想避免在可能的情况下使用id或类选择器或javascript。

Answer 1

我担心你不能用简单的CSS做到这一点。

问题是CSS不支持“向上”，只是“向下”。在您的第一个示例中，无法访问位于第二个th中的tr，它们是具有th scope="rowgroup"元素的“堂兄弟”，因此您必须首先上升然后下去。

使用Javascript / jQuery很容易解决，或者如果您可以在HTML中包含tr的{{1}}上添加一个类。

Answer 2

Juste用作css代码：

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

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

CSS选择行组元素，但不选择非行组元素

2 个答案: