如何使用 CSS 在同一类的 2 个标签之间选择兄弟姐妹答案

【问题标题】：How to select siblings between 2 tags of same class using CSS如何使用 CSS 在同一类的 2 个标签之间选择兄弟姐妹
【发布时间】：2016-07-24 12:42:43
【问题描述】：

我有一堆表格行<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.node.active 到下一个tr.node 的所有<tr>，不包括tr.node 本身。

本题使用jquery How to select all content between two tags in jQuery

有没有办法只使用 CSS 来做到这一点，因为在我的项目的给定场景中使用 javascript 会很困难？

【问题讨论】：

感谢您的快速回复。但正如我所说，如果不可能的话，使用 javascript 是很困难的。我可以使用 css 来完成这项工作吗？

标签： html css element siblings

【解决方案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>

【讨论】：