Html CSS斑马条纹特定表格tr:n子项（偶数）

我想用斑马线只选择表格。我不想为此使用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>

//在样式表中
.斑马纹{
tbody tr:n个孩子（偶数）td，tbody tr.偶数td{background:#e5ecf9；}
}
//在html中
奇怪的一排，漂亮而清晰。
一些东西
即使排得很好，很清楚，但应该是阴影。
一些东西

这是：

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

---

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

您的代码可以与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;}

---

您的代码如下所示：

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

这是错误的（很明显，或者你不需要问这个问题），但这并不遥远

解决方案是只需在现有CSS选择器中包含

.zebra\u stripe

。CSS不支持大括号中的多层选择器，就像您编写它的方式一样。（如果您确实需要，还有其他方言（如Less和Sass）支持这种语法，但在您的情况下，解决方案不需要任何巧妙的语法）

这假设您有一个类为zebra_stripe的表：

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

....

没有该类的表将不会被分条

---

顺便说一下，我把你的两个选择器都放在那里了，但你不应该两个都需要。

nth-child（）。在不支持
nth-child（）
（ie的旧版本）的浏览器中需要
tr.even
，但是在这种情况下，如果需要支持它们，您可以使用
even
类，而不需要使用
nth-child（）
，当然，表应该有class
zebra stripe
，甚至不像你的例子中那样是斑马。
<table class='zebra_stripe'>
    ....
</table>

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