Html CSS 覆盖规则和特性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11263488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS override rules and specificity
提问by Channel72
I'm often confused by CSS override rules: in general, I realize that more specific style-sheets override less specific ones, and that specificity is determined by how many selectors are specified. There's also the !importantkeyword, which plays a role as well.
我经常对 CSS 覆盖规则感到困惑：一般来说，我意识到更具体的样式表会覆盖不太具体的样式表，而这种特殊性取决于指定了多少选择器。还有!important关键字，它也起作用。
So, here's a simple example: I have a table with two table cells. The table itself has a CSS rule which applies to all cells within the table. However, the second table cell has it's own rule which should override the general table rule:
所以，这是一个简单的例子：我有一个包含两个表格单元格的表格。表格本身有一个适用于表格中所有单元格的 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>
But... when I open this in a browser, I see that rule2doesn't override rule1. Okay - so I guess I need to make rule2more "specific", but I can't really define any further selectors since I just want to apply it to a particular table cell. So, I tried putting the ! importantkeyword, but that doesn't work either.
但是......当我在浏览器中打开它时，我看到rule2它没有覆盖rule1. 好的 - 所以我想我需要rule2更“具体”，但我不能真正定义任何进一步的选择器，因为我只想将它应用于特定的表格单元格。所以，我尝试输入! important关键字，但这也不起作用。
I'm able to override rule2if I wrap the text node in a <div>, like:
rule2如果我将文本节点包装在 a 中<div>，我可以覆盖，例如：
<td class = "rule2"><div>abc</div></td>
...and then make the CSS rule more specific:
...然后使 CSS 规则更具体：
td.rule2 div {
background-color: #ffff00; !important
}
This works, but it's not exactly what I want. For one thing, I want to apply the rule to the table cell, not the DIV. It makes a difference because you can still see the background color of rule1as a border around the div.
这有效，但这不是我想要的。一方面，我想将规则应用于表格单元格，而不是 DIV。它有所不同，因为您仍然可以看到rule1div 周围的背景颜色作为边框。
So, what do I need to do to tell CSS I want rule2to override rule1for the tdelement?
那么，我需要做什么来告诉 CSS 我想rule2覆盖rule1该td元素？
回答by Per Salbark
To give the second rule higher specificity you can always use parts of the first rule. In this case I would add table.rule1 trfrom rule one and add it to rule two.
为了使第二条规则具有更高的特异性，您始终可以使用第一条规则的部分内容。在这种情况下，我table.rule1 tr将从规则一添加并将其添加到规则二。
table.rule1 tr td {
background-color: #ff0000;
}
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
After a while I find this gets natural, but I know some people disagree. For those people I would suggest looking into LESSor SASS.
回答by Kaivosukeltaja
The specificity is calculated based on the amount of id, class and tag selectors in your rule. Id has the highest specificity, then class, then tag. Your first rule is now more specific than the second one, since they both have a class selector, but the first one also has two tag selectors.
特异性是根据规则中 id、class 和 tag 选择器的数量计算的。Id 具有最高的特异性，然后是类，然后是标签。您的第一个规则现在比第二个更具体，因为它们都有一个类选择器，但第一个也有两个标签选择器。
To make the second one override the first one, you can make more specific by adding information of it's parents:
要使第二个覆盖第一个，您可以通过添加其父项的信息来更具体：
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
Hereis a nice article for more information on selector precedence.
这是一篇关于选择器优先级的更多信息的好文章。
回答by Nicholas King
The important needs to be inside the ;
重要的需要在 ;
td.rule2 div { background-color: #ffff00 !important; }
in fact i believe this should override it
事实上，我相信这应该覆盖它
td.rule2 { background-color: #ffff00 !important; }
