CSS颜色组3
CSS颜色组3
提问于 2015-09-01 23:57:17
问题：
我正试图找出最佳的方法来实现3组表的颜色交替。https://jsfiddle.net/94g0fqLr/
<table>
<thead>
<th></th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</thead>
<tbody>
<!-- Group 1-->
<tr>
<td><b>Gross Margin</b></td>
<td>14.5%</td>
<td>14.5%</td>
<td>15.0%</td>
<td>16.5%</td>
</tr>
<tr>
<td></td>
<td>19.9%</td>
<td>22.7%</td>
<td>22.6%</td>
<td>23.3%</td>
</tr>
<tr>
<td></td>
<td>21.2%</td>
<td>22.3%</td>
<td>26.4%</td>
<td>27.5%</td>
</tr>
<!-- Group 2-->
<!-- <tr> contents same as group 1 -->
<tr></tr>
<tr></tr>
<tr></tr>
<!-- Group 3-->
<!-- <tr> contents same as group 1 -->
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>我想要的是每隔一秒钟给组涂上颜色。也就是说，<tr>'s 1-3是白色的，<tr>'s 4-6是灰色的，<tr>'s 7-9又是白色的，依此类推。
我一直在摆弄:nth-child选择器，使用了一系列的:not()试图让它工作，但没有用。
问题：
是否有一个纯粹的CSS方法来做这件事？
或
我需要重构HTML，添加类等吗？
或
有更好的建议来实现这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-02 00:05:59
下面是一种不需要重构HTML的纯CSS方法。
假设您的组总是由3人组成，您可以使用6n+1、6n+2和6n+3交替对您的组进行着色：
现场演示：
table th, table td{
padding: 5px 30px;
}
table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3){
background-color: #DCDCDC;
}<table>
<thead>
<th></th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</thead>
<tbody>
<!-- Group 1-->
<tr>
<td><b>Gross Margin</b></td>
<td>14.5%</td>
<td>14.5%</td>
<td>15.0%</td>
<td>16.5%</td>
</tr>
<tr>
<td></td>
<td>19.9%</td>
<td>22.7%</td>
<td>22.6%</td>
<td>23.3%</td>
</tr>
<tr>
<td></td>
<td>21.2%</td>
<td>22.3%</td>
<td>26.4%</td>
<td>27.5%</td>
</tr>
<!-- Group 2-->
<tr>
<td><b>EBITDA/Interest</b></td>
<td>14.5%</td>
<td>14.5%</td>
<td>15.0%</td>
<td>16.5%</td>
</tr>
<tr>
<td></td>
<td>19.9%</td>
<td>22.7%</td>
<td>22.6%</td>
<td>23.3%</td>
</tr>
<tr>
<td></td>
<td>21.2%</td>
<td>22.3%</td>
<td>26.4%</td>
<td>27.5%</td>
</tr>
<!-- Group 3-->
<tr>
<td><b>EBIT/Interest</b></td>
<td>14.5%</td>
<td>14.5%</td>
<td>15.0%</td>
<td>16.5%</td>
</tr>
<tr>
<td></td>
<td>19.9%</td>
<td>22.7%</td>
<td>22.6%</td>
<td>23.3%</td>
</tr>
<tr>
<td></td>
<td>21.2%</td>
<td>22.3%</td>
<td>26.4%</td>
<td>27.5%</td>
</tr>
</tbody>
</table>
JSFiddle版本：https://jsfiddle.net/94g0fqLr/1/
Stack Overflow用户
发布于 2015-09-02 00:08:05
您可以尝试给行一个类。
<table>
<thead>
<th></th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
</thead>
<tbody>
<!-- Group 1-->
<tr class="group1">
<td><b>Gross Margin</b></td>
<td>14.5%</td>
<td>14.5%</td>
<td>15.0%</td>
<td>16.5%</td>
</tr>
<tr class="group1">
<td></td>
<td>19.9%</td>
<td>22.7%</td>
<td>22.6%</td>
<td>23.3%</td>
</tr>
<tr class="group1">
<td></td>
<td>21.2%</td>
<td>22.3%</td>
<td>26.4%</td>
<td>27.5%</td>
</tr>
<!-- Group 2-->
<!-- <tr class="group2"> contents same as group 1 -->
<tr class="group2"></tr>
<tr class="group2"></tr>
<tr class="group2"></tr>
<!-- Group 3-->
<!-- <tr class="group1"> contents same as group 1 -->
<tr class="group1"></tr>
<tr class="group1"></tr>
<tr class="group1"></tr>
</tbody>
</table>
然后用CSS针对每一个
.group1
{
background:white;
}
.group2
{
background:grey;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32342651
复制相关文章
相似问题
腾讯云开发者
