CSS覆盖规则和特异性
我经常被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关键字，但也不起作用。
如果将文本节点包装在<div>中，则可以覆盖rule2，如下所示：
<td class = "rule2"><div>abc</div></td>然后，...and使CSS规则更加具体：
td.rule2 div {
background-color: #ffff00; !important
}这是可行的，但这并不完全是我想要的。首先，我希望将规则应用于表格单元格，而不是DIV。这很重要，因为您仍然可以看到rule1的背景色作为div周围的边框。
那么，我需要做什么才能告诉CSS我希望rule2覆盖td元素的rule1呢？
回答 3
Stack Overflow用户
发布于 2012-06-29 22:27:09
Stack Overflow用户
发布于 2012-06-29 22:24:12
根据规则中id、class和tag选择器的数量来计算特异性。Id的特异性最高，然后是class，最后是tag。您的第一个规则现在比第二个规则更具体，因为它们都有一个类选择器，但第一个规则也有两个标签选择器。
为了让第二个覆盖第一个，你可以通过添加它的父元素的信息来做得更具体：
table.rule1 tr td.rule2 {
background-color: #ffff00;
}有关选择器优先级的更多信息，Here是一篇很好的文章。
Stack Overflow用户
发布于 2012-06-29 22:21:56
重要的需要在内部；
td.rule2 div { background-color: #ffff00 !important; } 事实上，我认为这应该会覆盖它
td.rule2 { background-color: #ffff00 !important; } https://stackoverflow.com/questions/11263488
复制相似问题