如何使用CSS

Question

選擇同一類2個標籤之間的兄弟姐妹我有一大堆的錶行，其中<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>