html - 如何使用 CSS 在同一类的 2 个标签之间选择 sibling

Question

我有一堆表格行 <tr></tr>

其中很少有 class = "node"

只有一个 tr.node将是 class = "active"

<tr class="node">...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr class="node">...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr class="node active">...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr class="node">...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr class="node">...</tr>

我想选择所有 <tr>来自 tr.node.active到下一个tr.node不包括 tr.node是他们自己。

这道题用到了jquery How to select all content between two tags in jQuery

有没有什么方法可以只使用 CSS 来做到这一点，因为在我的元素的给定场景中使用 javascript 会很困难？

Answer 1

您需要使用 CSS3 ~ 来选择元素的所有兄弟。

tr.node.active ~ tr {
    color: red;
}

tr.node.active ~ tr.node,
tr.node.active ~ tr.node ~ tr {
    color: black;
}

<table>
    <tr class="node"><td>node</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr class="node active"><td>node active</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr class="node"><td>node</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr><td>tr</td></tr>
    <tr class="node"><td>node</td></tr>
</table>