我经常对CSS覆盖规则感到困惑:一般来说,我意识到更具体的样式表会覆盖不太具体的样式表,而这种特异性取决于指定的选择器数量.还有!important关键字,它也起着作用.
所以,这是一个简单的例子:我有一个包含两个表格单元格的表格.表本身有一个CSS规则,适用于表中的所有单元格.但是,第二个表格单元格有自己的规则,它应该覆盖通用表格规则:
<html>
<head>
<style type = "text/css">
table.rule1 tr td {
background-color: #ff0000;
}
td.rule2 {
background-color: #ffff00;
}
</style>
</head>
<body>
<table class = "rule1">
<tr>
<td>abc</td>
</tr>
<tr>
<td class = "rule2">abc</td>
</tr>
</table>
</body>
</html>
但是......当我在浏览器中打开它时,我发现rule2它没有覆盖rule1.好吧 - 所以我想我需要制作rule2更多"特定",但我无法真正定义任何进一步的选择器,因为我只想将它应用于特定的表格单元格.所以,我尝试使用! important关键字,但这也不起作用.
rule2如果我将文本节点包装在一个中<div>,我可以覆盖,如:
<td class = "rule2"><div>abc</div></td>
...然后使CSS规则更具体:
td.rule2 div {
background-color: #ffff00; !important
}
这有效,但这不是我想要的.首先,我想将规则应用于表格单元格,而不是DIV.它有所不同,因为您仍然可以看到rule1div周围的背景颜色作为边框.
所以,我需要做什么要告诉我的CSS要rule2覆盖rule1的td元素？
Per*_*ark 74
为了使第二个规则具有更高的特异性,您可以始终使用第一个规则的一部分.在这种情况下,我table.rule1 tr将从规则一添加并将其添加到规则二.
table.rule1 tr td {
background-color: #ff0000;
}
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
过了一会儿,我觉得这很自然,但我知道有些人不同意.对于那些人,我建议你看看LESS或SASS.
Kai*_*aja 16
特异性是根据规则中id,class和tag选择器的数量计算的.Id具有最高的特异性,然后是类,然后是标记.你的第一条规则现在比第二条规则更具体,因为它们都有一个类选择器,但第一条也有两个标签选择器.
要使第二个覆盖第一个,您可以通过添加其父亲的信息来更具体:
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
这是一篇很好的文章,了解有关选择器优先级的更多信息.
重要的是需要在里面;
td.rule2 div { background-color: #ffff00 !important; }
事实上,我相信这应该覆盖它
td.rule2 { background-color: #ffff00 !important; }