3

我想斑马条纹只选择使用的表。我不想为此使用 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 的其他元素。有人可以帮我解答这个问题吗？

4

3 回答 3

4

您的代码如下所示：

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

这是错误的（显然，或者你不需要问这个问题），但也不是那么遥远。

解决方案是您只需要包含.zebra_stripe在现有的 CSS 选择器中。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不支持的浏览器（nth-child()即旧版本的 IE）even需要nth-child().

于 2012-09-15T21:44:04.087 回答
2

您的代码可以与 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;}
于 2012-09-15T21:42:36.097 回答
2 
.zebra-stripe tbody tr:nth-child(even) td, .zebra-stripe tbody tr.even td {background:#e5ecf9;}
于 2012-09-15T21:44:04.333 回答