表中的tr的CSS

Question

是否可以将backroung颜色更改为表格中的特定tr？ 我怎样才能使每个tr从id = 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

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

查找CSS nth-child http://www.w3schools.com/cssref/sel_nth-child.asp

例如：

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

Answer 3

或者Css类选择器也可以替代

.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>