Question

问题：

我正在尝试找出以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，添加类等？或< / strong>
更好的建议是什么？

Answer 1

以下是纯CSS方法，不要求您重构HTML。

假设您的群组总是3人一组，您可以使用6n+1，6n+2和6n+3以交替方式为群组着色：

现场演示：

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle版本：https://jsfiddle.net/94g0fqLr/1/

Answer 2

您可以尝试为行提供一个类

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

CSS颜色组3

2 个答案: