CSS斑马条纹特定表tr：nth-​​child（偶数）

Question

我想斑马条纹只使用选择表。我不想为此使用jQuery。

tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}

当我把它放在一个css文件中时，会影响调用相同样式表的所有页面上的所有表。我想做的是有选择地将它应用于特定的表格。

我试过这个，但它不起作用。

// in stylesheet
.zebra_stripe{
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}    
}

// in html
<table class="zebra_even">
<colgroup>
    <col class="width_10em" />
    <col class="width_15em" />
</colgroup>
<tr>
    <td>Odd row nice and clear.</td>
    <td>Some Stuff</td>
</tr>
<tr>
    <td>Even row nice and clear but it should be shaded.</td>
    <td>Some Stuff</td>
</tr>
</table>

而且：

<table>
    <colgroup>
        <col class="width_10em" />
        <col class="width_15em" />
    </colgroup>
    <tbody class="zebra_even">

样式表的工作原理是正确格式化html的其他元素。有人可以帮我解决这个问题吗？

Answer 1

您的代码如下所示：

.zebra_stripe{
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}    
}

这是错误的（显然，或者你不需要问这个问题），但距离不远。

解决方案是您只需要在现有的CSS选择器中包含.zebra_stripe。 CSS不支持大括号中的多层选择器，就像你编写它一样。 （还有像Less和Sass这样的其他方言支持这种语法，如果你真的需要它，但在你的情况下，解决方案不需要任何聪明的语法）

.zebra_stripe tbody tr:nth-child(even) td, .zebra_stripe tbody tr.even td {
    background:#e5ecf9;
}

这假设您有一个包含班级zebra_stripe的表格：

<table class='zebra_stripe'>
    ....
</table>

没有该类的表将不会被条带化。

顺便说一句，我已经将你的选择器留在那里，但你不应该同时需要它们。 nth-child()选择器应该自行完成，而不需要tr.even替代。在不支持tr.even的浏览器（即IE的旧版本）中需要nth-child()，但在这种情况下，如果您需要支持它们，则需要使用{even 1}}类，不需要使用nth-child()。

Answer 2

.zebra-stripe tbody tr:nth-child(even) td, .zebra-stripe tbody tr.even td {background:#e5ecf9;}

Answer 3

您的代码可以使用像LESS

这样的css解析器引擎

// in stylesheet
.zebra_stripe{
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}    
}

通常的CSS应该看起来像

.zebra_stripe tbody tr:nth-child(even) td,
.zebra_stripe tbody tr.even td {background:#e5ecf9;}