用於表格中的tr的CSS

Question

是否可以將表格中的背景顏色更改爲特定的tr？ 我怎樣才能讓使從ID每個TR = 1〜ID = 2是藍色的，ID = 2〜ID = 3紅等。

我有這樣的代碼：

<tbody> 
<tr id="1"></tr> <-- Blue 
<tr></tr>   <-- Blue 
<tr></tr>   <-- Blue 
<tr id="2"></tr> <-- Red 
<tr></tr>   <-- Red 
<tr id="3"></tr> <-- Green 
<tr></tr>   <-- Green 
<tr></tr>   <-- Green 
<tr></tr>   <-- Green 
</tbody> 

Answer 1

試試這個：

[id="1"], [id="1"] ~ tr { 
 
    background-color: blue; 
 
} 
 
[id="2"], [id="2"] ~ tr { 
 
    background-color: red; 
 
} 
 
[id="3"], [id="3"] ~ tr { 
 
    background-color: green; 
 
}

<table> 
 
<tbody> 
 
<tr id="1"><td>foo</td></tr> 
 
<tr><td>foo</td></tr> 
 
<tr><td>foo</td></tr> 
 
<tr id="2"><td>foo</td></tr> 
 
<tr><td>foo</td></tr> 
 
<tr id="3"><td>foo</td></tr> 
 
<tr><td>foo</td></tr> 
 
<tr><td>foo</td></tr> 
 
<tr><td>foo</td></tr> 
 
</tbody> 
 
</table>

Answer 2

查找CSS第n個孩子 http://www.w3schools.com/cssref/sel_nth-child.asp

例如：

tr:nth-child(5n+3) {background-color:red} 

Answer 3

或CSS類選擇可以ALDO是替代這個

.blue{ 
 
background-color:blue; 
 
color:white 
 
} 
 
.red{ 
 
background-color:red; 
 
color:white 
 
} 
 
.green{ 
 
background-color:green; 
 
color:white 
 
}

<table> 
 
<tbody> 
 
<tr id="1" class="blue"><td>blue</td></tr> 
 
<tr class="blue"><td>blue</td></tr>   
 
<tr class="blue"><td>blue</td></tr> 
 

 
<tr id="2" class="red"><td>red</td></tr> 
 
<tr class="red"><td>red</td></tr>   
 

 
<tr id="3" class="green"><td>green</td></tr> 
 
<tr class="green"><td>green</td></tr>   
 
<tr class="green"><td>green</td></tr> 
 
<tr class="green"><td>green</td></tr>   
 
<tr class="green"><td>green</td></tr> 
 

 
</tbody> 
 
</table>