セレクタ

Question

I以下のシナリオがあります

<table> 
    <tr class="header"> 
    <tr class="data1"> 
    <tr class="data2"> 
    <tr class="data3"> 
    <tr class="header"> 
    <tr class="data1"> 
    <tr class="data2"> 
</table> 

私は青に最初のヘッダ下data要素のテキストの色を変更したい、とdata要素の下を2番目のヘッダーは赤です。

私は様々なnth-childとそれに隣接する兄弟（+）を試しましたが、私の試行はすべて不完全です。

tr[class^=data]私が影響を与えたいすべての要素を取得しますが、2つのグループに分けてください。

私は私が唯一の2 header

あなたが知っている場合、私は、ここだけのセレクタ

Answer 1

をジャバスクリプト/ jqueryのを使用することはできませんを持って知っています、私は必要がありますどのように多くのdata要素がわかりません

.header ~ tr[class^=data] { 
    color: #f00; 
} 

.header ~ .header ~ tr[class^=data] { 
    color: #00f; 
} 

変更することができた場合はHTML：あなたは2つのだけヘッダー行を持っていることを、あなただけのデータ行の第二セットのスタイルは、データ行の最初のセットのそれらを上書きすることができます

tbody:first-child td { 
 
    color: #f00; 
 
} 
 

 
tbody:last-child td { 
 
    color: #00f; 
 
}

<table> 
 
    <tbody> 
 
    <tr class="header"><th>Header 
 
    <tr class="data1"><td>Data1 
 
    <tr class="data2"><td>Data2 
 
    <tr class="data3"><td>Data3 
 
    <tbody> 
 
    <tr class="header"><th>Header 
 
    <tr class="data1"><td>Data1 
 
    <tr class="data2"><td>Data2 
 
</table>

Answer 2

.header ~ [class^="data"] { 
    background-color: red; 
} 
.header ~ .header ~ [class^="data"] { 
    background-color: blue; 
}