我经常被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
呢?
发布于 2012-06-29 22:27:09
发布于 2012-06-29 22:24:12
根据规则中id、class和tag选择器的数量来计算特异性。Id的特异性最高,然后是class,最后是tag。您的第一个规则现在比第二个规则更具体,因为它们都有一个类选择器,但第一个规则也有两个标签选择器。
为了让第二个覆盖第一个,你可以通过添加它的父元素的信息来做得更具体:
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
有关选择器优先级的更多信息,Here是一篇很好的文章。
发布于 2012-06-29 22:21:56
重要的需要在内部;
td.rule2 div { background-color: #ffff00 !important; }
事实上,我认为这应该会覆盖它
td.rule2 { background-color: #ffff00 !important; }
https://stackoverflow.com/questions/11263488
复制相似问题