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}