CSS样式特定的孩子
[英]Css styling to specific number of child
问题描述
I have one table, I want to apply css to 5th number of child then 10th number of child the 15th, 20th and so on so that 1st 5 rows looks to be one section then another 5 rows looks different section. 
我有一张桌子，我想将css应用于孩子的第5个数字，然后将孩子的第10个数字应用于15、20和第10个数字，依此类推，以便第1个5行看起来像是一个部分，然后其他5行看起来像是不同的部分。 What should I do for this. 我该怎么办。 I have below mentioned code. 我有下面提到的代码。
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>
In my local code rows are coming dynamically and I don't know how many rows will come so I want to apply css to 5th multiple of child using css. 在我的本地代码中，行是动态变化的，我不知道会出现多少行，因此我想将css应用于使用css的孩子的5倍数。 Please help. 请帮忙。
2 个解决方案
解决方案1
4 已采纳 2017-12-29 10:53:42
You can try this. 你可以试试看 The multiplicy is 10, so for each 10 element you style only 5 (the last ones from 6 to 10 or the first ones from 1 to 5). 乘数是10，因此对于每个10元素，您只能设置5的样式（最后一个从6到10或第一个从1到5）。 With this configuration you will have them different 5 by 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>
解决方案2
0 2017-12-29 10:55:09
您应该能够使CSS规则
table tr:nth-child(5n) td{border-bottom:1px solid red}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.