html - CSS nth-child 所有元素显示为 "odd"

Question

我有一个 HTML 和 CSS 表格，我想应用第 n 个子选择器，以便我可以在表格行之间交替颜色。

出于某种原因，每一行都显示为相同的颜色。

Stack Overflow 上的一个类似问题说第 n 个子选择器不适用于子元素，而是元素本身。我理解这一点，并且我有另一个可以正常工作的表类，但是我想应用它的第二个表类不起作用。

我已经尝试将 WORKING 表类应用于多个表。在某些表上有效，在其他表上无效。

CSS:

.prevTable{
    table-layout: fixed;
    border-collapse: collapse;
    padding: 3px;
    border-radius: 3px;
    font-size: 13px;
    margin-left: 0px;
    width: 860px;
}
.prevTable th{
    padding: 6px 3px 6px 3px;
    background-color: #CCCCCC;
    font-family: Raleway;
    text-align: center;
    border-radius: 3px;
    border: 1px solid gray;
}
.prevTable td{
    padding:5px;
    font-family: Raleway;
    border: 1px solid gray;
    text-align:left;
}
table.prevTable tr:nth-child(even){
    background-color: #E6E6E6;
}
table.prevTable tr:nth-child(odd){
    background-color: #C9C9C9;
}

HTML 表格:

<table class="prevTable">
    <thead>
        <tr>
            <th>Parameter</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
             <tr><td>Some Content</td></tr>
             <tr><td>Some Content</td></tr>
             <tr><td>Some Content</td></tr>
             <tr><td>Some Content</td></tr>
        </tbody>
</table>

我的 fiddle :http://jsfiddle.net/vranvs/dhnJ9/

有什么想法吗？

谢谢!

Answer 1

你需要将它们包裹在表格数据中，td

<tbody>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
     <tr><td>Some Content</td></tr>
</tbody>