如何使用 CSS select 相同 class 的 2 个标签之间的兄弟姐妹

Question

我有一堆 table 行 <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>

我想 select 从 tr.node.active 到下一个 tr.node 的所有 <tr>，不包括 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>

如何使用 CSS select 相同 class 的 2 个标签之间的兄弟姐妹

How to select siblings between 2 tags of same class using CSS

html

css

element

siblings