html - CSS 选择行组元素但不选择非行组元素

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很容易解决，或者你可以在tr上添加一个类包含 th scope="rowgroup"在您的 HTML 中。