CSS樣式特定的孩子

Question

我有一張桌子，我想將css應用於孩子的第5個數字，然后將孩子的第10個數字應用於15、20和第10個數字，依此類推，以便第1個5行看起來像是一個部分，然后其他5行看起來像是不同的部分。 我該怎么辦。 我有下面提到的代碼。

 table{ background:#fff; width:100% } td{ padding:5px; } table tr:nth-child(5) td{border-bottom:1px solid red} table tr:nth-child(10) td{border-bottom:1px solid red} 

 <table colspan="0" celspacing="0"> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr><tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr><tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> </table> 

在我的本地代碼中，行是動態變化的，我不知道會出現多少行，因此我想將css應用於使用css的孩子的5倍數。 請幫忙。

Answer 1

你可以試試看 乘數是10，因此對於每個10元素，您只能設置5的樣式（最后一個從6到10或第一個從1到5）。 使用此配置，您將獲得5 x 5的不同值。

 table { background: #fff; width: 100% } td { padding: 5px; } table tr:nth-child(10n+6) td, table tr:nth-child(10n+7) td, table tr:nth-child(10n+8) td, table tr:nth-child(10n+9) td, table tr:nth-child(10n+10) td { background: #f2f2f5; color: red; } 

 <table colspan="0" celspacing="0"> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> </table> 

Answer 2

您應該能夠使CSS規則

table tr:nth-child(5n) td{border-bottom:1px solid red}