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，所以您需要在此处使用。{p> th位于tr内，所以无论你放置什么，th都会在前面显示灰色。

Answer 2

CSS特异性不适用于您的情况。

你的CSS针对两个不同的元素; th和tr。

您必须从图层角度考虑这一点。

由于th中包含tr，background-color的{{1}}将显示上方 {{1} } th。

以此代码为例：

background-color

第一个和第三个tr有透明 <tr style="background-color: gray"> <th>Heading One</th> <th style="background-color: red">Heading Two</th> <th>Heading Three</th> </tr>，因此th的{{1}}会通过它们显示。第二个background-color定义了background-color，因此按预期显示。

您可以查看此jsfiddle以查看其实际效果。

Answer 3

您的第一条规则并未覆盖第二条规则。

原因是您的标题是灰色的，因为它包含th个元素，而您只为background: grey元素指定了th。（而th与tr不同。

如果您还想在标题中添加列颜色，请修改您的代码，以便 {/ 1}}和th ，如下所示：

td

CSS特异性规则麻烦

3 个答案: