CSS第n个子项不工作

我知道这个问题已经被问过很多次了，但我还是无法解决问题，所以这是我的html：

    <table class="UMLTable">
        <tr>
            <th>Table<th>
        </tr>
        <tr>
            <td>Attribute 1<td>
        </tr>
        <tr>
            <td>Attribute 1<td>
        </tr>
        <tr>
            <td>Attribute 1<td>
        </tr>
        </tr>
    </table>

---

您需要选择第n个

tr

元素，而不是子

td

元素

您的选择器应为：

.UMLTable tr:nth-child(even) td {
    background-color:blue;
}

CSS不能按预期工作的原因是

td

元素不是兄弟元素

.UMLTable tr:n个子项（偶数）td{
背景颜色：蓝色；
}

桌子
属性1
属性1
属性1

尝试使用

tr

元素而不是

td

如下：

.UMLTable tr:nth-child(even) td {
    background-color:blue;
}

第n个子（n）选择器匹配第n个子元素的每个元素，无论其父元素的类型如何

.UMLTable tr:nth-child(even) td {
    background-color:blue;
}