CSS特效法则麻烦

我在CSS这两种风格，无论是在外部链接的CSS文件，并应用于同一个表，带班myTable的（这是一个更大的问题的简化版本）：CSS特效法则麻烦

.myTable th 
{ 
    background-color: gray; 
} 

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

当我运行该页面时，标题为灰色，但为什么？我想知道的是为什么第一条规则是覆盖第二条规则。如果我理解了很好的特异性计算（显然我没有），第二条规则更具体（所有计算器在第二条规则中给我0,1,2和第一条规则中的0,1,1）。为什么然后，如果第二条规则具有更多特异性，则标题是灰色而不是蓝色？请有人能帮我理解这一点吗？谢谢你非常非常......

来源

2015-12-21 Alan Espinet

你现在明白了吗？ –

男人，你在吗？ –

你忘th或td：

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

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

来源

2015-12-21 17:32:18

您的第一条规则不会覆盖第二条规则。

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

如果你想在你的头交替柱的颜色也，然后修改代码以解决都的th和td，像这样：

.myTable th { 
    background-color: gray; 
} 

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

来源

2015-12-21 17:35:52

是的，谢谢...我把一个透明的颜色（rgba）添加到标题中，我看到后面的蓝色，所以这意味着CSS正在将标题画在“超过”tr ...非常感谢你... –

@AlanEspinet你看到我的答案了吗？ –

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

你的CSS面向两个不同的元素; th和tr。

你必须从层角度思考这个问题。

由于th的被包含在tr的那么th的background-color将上述的tr的background-color显示。

采取此代码为例如：

<tr style="background-color: gray"> <th>Heading One</th> <th style="background-color: red">Heading Two</th> <th>Heading Three</th> </tr>

第一和第三th具有透明background-color，所以tr的background-color示出了通过它们。第二个th有一个background-color定义，因此它显示如预期。

你可以看看这个jsfiddle看到它在行动。

来源

2015-12-21 18:01:22

CSS特效法则麻烦

回答

相关问题