Question

可能有一个奇怪的问题，但我想用CSS3来做这件事，但我不确定是否可能。我尝试使用nth-child和nth-of-type进行试验，但我无法让它发挥作用。我想如果不使用Javascript就很难得到我想要的东西。

无论如何，让我告诉你我想要的东西......

我在<tr>中有三个table个元素，我想给它们一个背景色。在这些表行下面，我们还有三个表行。那些不会有不同的颜色。问题：你如何选择它们？使用even或odd，这是不可能的......但是否有可能将nth-of-type与偶数或奇数组合在一起？或者这是乌托邦？

我知道我可以给这些行一个类并让它工作，但这不是我的目标。很想用CSS3解决它，即使IE不支持它。有没有办法做到这一点？

HTML：

<table class="dummyclass">
        <tbody>
            <tr class="This_should_get_a_background_color">
                    <th>Dummytext</th>
                    <td><a href="#">Dummy dummy</a></td>
            </tr>
            <tr class="This_should_get_a_background_color">
                  <th>Dumminho</th>
                  <td>Golazo</td>
            </tr>
            <tr class="This_should_get_a_background_color">
                  <th>Great game</th>
                  <td>yesterday</td>
            </tr>

             <tr class="no-background-please">
                  <th>Dummytext</th>
                  <td><a href="#">Dummy dummy</a></td>
              </tr>
              <tr class="no-background-please">
                 <th>Dumminho</th>
                 <td>Golazo</td>
              </tr>
              <tr class="no-background-please">
                 <th>Great game</th>
                 <td>yesterday</td>
               </tr>

             <tr class="This_should_get_a_background_color">
                 <th>Dummytext</th>
                 <td><a href="#">Dummy dummy</a></td>
             </tr>
             <tr class="This_should_get_a_background_color">
                    <th>Dumminho</th>
                    <td>Golazo</td>
             </tr>
             <tr class="This_should_get_a_background_color">
                    <th>Great game</th>
                    <td>yesterday</td>
                </tr>
             </tbody>
            </table>

对于CSS，我尝试了许多类似tr:nth-of-type(2n+1)的内容，但我在这里看到这不是我的选择： http://css-tricks.com/examples/nth-child-tester/

对于小提琴，请点击此处： http://jsfiddle.net/95vrb/1/

我已经为行描述了类名，因此您可以理解我要做的事情。

Answer 1

可能有更好的方法，但这有效。基本上它会从第1个，第2个和第3个元素开始为每个第6个孩子添加背景。

http://jsfiddle.net/95vrb/2/

tr:nth-child(6n + 3), 
tr:nth-child(6n + 2), 
tr:nth-child(6n + 1) {
    background: #f00;
}

我发现这是对:nth-child http://css-tricks.com/how-nth-child-works/

的精彩介绍

Answer 2

你可以用这个：

.dummyclass tr:nth-of-type(-n+3), //First three rows
.dummyclass tr:nth-of-type(n+7) { //Last three rows
    background: #aaa;
}

小提琴：http://jsfiddle.net/Shiazure/95vrb/5/

当然，这是根据您提供的示例量身定制的，需要根据单元格/行数进行更改。

使用CSS3为每三个表行提供一个背景颜色

2 个答案: