CSS 特异性规则问题

Question

我在 CSS 中有这两种样式，都在外部链接的 css 文件中，并应用于同一个表，类为 myTable(这是一个更大问题的简化版本):

.myTable th
{
    background-color: gray;
}

.myTable tr:nth-child(odd)
{
    background-color: blue;
}

当我运行页面时，页眉是灰色的，但为什么？我想知道的是为什么第一条规则覆盖了第二条。如果我很好地理解特异性计算(显然我没有)，第二条规则更具体(所有计算器在第二条规则中给我 0、1、2，在第一条规则中给我 0、1、1)。那么，为什么标题是灰色而不是蓝色，如果第二条规则有更多的特异性？？？？有人可以帮助我理解这一点吗？非常非常感谢...

Answer 1

您忘记了 th 或 td:

.myTable tr:nth-child(odd) th,
.myTable tr:nth-child(odd) td {
    background-color: blue;
}

因为你在第一个类申请th，所以你需要在这里使用它。 th 在 tr 里面，所以无论你放什么，th 都会在前面显示灰色。