CSS 优先级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/667223/
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 precedence
提问by user80603
My webpage contains:
我的网页包含：
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
td {
padding-left:10px;
}
</style>
The referenced stylesheet contains:
引用的样式表包含：
.rightColumn * {margin: 0; padding: 0;}
I have a table in the rightcolumnID where I want the cells to have a little padding. However, the referenced stylesheet is taking precedence over the inline styling. I see this visually and also via Firebug. If I turn off the padding:0instruction in Firebug, the padding-left takes effect.
我在rightcolumnID 中有一个表格，我希望单元格有一点填充。但是，引用的样式表优先于内联样式。我在视觉上以及通过 Firebug 看到了这一点。如果我关闭padding:0Firebug 中的指令，则 padding-left 生效。
How can I get the padding-leftto work?
我怎样才能padding-left工作？
采纳答案by Ben Blank
As others have mentioned, you have a specificity problem. When determining which of two rules should take precedence, the CSS engine counts the number of #ids in each selector. If one has more than the other, it's used. Otherwise, it continues comparing .classes and tags in the same way. Here, you have a class on the stylesheet rule, but not on the inline rule, so the stylesheet takes precedence.
正如其他人所提到的，您有一个特异性问题。在确定两个规则中的哪一个应该优先时，CSS 引擎会计算#id每个选择器中s的数量。如果一个比另一个多，则使用它。否则，它会继续以相同的方式比较.classes 和tags。在这里，您在样式表规则上有一个类，但在内联规则上没有，因此样式表优先。
You can override this with !important, but that's an awfully big hammer to be using here. You're better off improving the specificity of your inline rule. Based on your description, it sounds like your .rightColumnelement either is or contains a tableand you'd like the cells in that table to have extra spacing? If so, the selector you're looking for is ".rightColumn td", which is more specific than the stylesheet rule and will take precedence.
您可以使用 覆盖它!important，但这里使用的锤子非常大。您最好提高内联规则的特异性。根据您的描述，听起来您的.rightColumn元素是或包含 atable并且您希望该表格中的单元格具有额外的间距？如果是这样，则您要查找的选择器是“ .rightColumn td”，它比样式表规则更具体并且优先。
回答by u7867
Most of the answers are correct in saying that this is a specificity problem but are incorrect or incomplete in explaining the specificity rules.
大多数答案都正确地说这是一个特殊性问题，但在解释特殊性规则时不正确或不完整。
Basically in your case .rightColoumn *is "more specific" than tdand so that rule wins even though it comes earlier.
基本上，在您的情况下，.rightColoumn *它比“更具体” td，因此即使它出现得更早，该规则也会获胜。
The CSS 2.1 rules are located here. These rules are:
CSS 2.1 规则位于此处。这些规则是：
- count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
- 如果声明来自“样式”属性而不是带有选择器的规则，则计数为 1，否则为 0 (= a)（在 HTML 中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，所以 a=1、b=0、c=0 和 d=0。）
- 计算选择器中 ID 属性的数量（= b）
- 计算选择器中其他属性和伪类的数量（= c）
- 计算选择器中元素名称和伪元素的数量（= d）
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
连接四个数字 abcd（在具有大基数的数字系统中）给出了特殊性。
So in your case you have two rules:
因此，在您的情况下，您有两个规则：
.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */
0001 is lower than 0010 and thus the first rule wins.
0001 小于 0010，因此第一个规则获胜。
There are two ways to fix this:
有两种方法可以解决这个问题：
- Use
!importantto make a rule more "important". I'd avoid doing this because it is confusing when you have lots of rules spread out over several files. - Use a higher-specifity selector for the td you want to modify. You can add a class name to it or an id and this will allow you to supersede the rule from the linked CSS file.
- 使用
!important做出更规则的“重要”。我会避免这样做，因为当您将大量规则分布在多个文件中时，这会令人困惑。 - 对要修改的 td 使用更高特异性的选择器。您可以为它添加一个类名或一个 id，这将允许您从链接的 CSS 文件中取代规则。
Example:
例子：
<style>
.rightColomn * { padding: 0; } /* 0010 */
td#myUnpaddedTable { padding: 10px; } /* 0101 */
td.anUnpaddedTable { padding: 10px; } /* 0011 */
</style>
Edit:Fixed the specificity rules for *. David's comment prompted me to re-read the spec, which does show that the * selector contributes nothing to the specificity score.
编辑：修复了 *. David 的评论促使我重新阅读规范，它确实表明 * 选择器对特异性分数没有任何贡献。
回答by Dan Lew
The easiest way to get it to work is to add "!important" to CSS to guarantee its precedence (unless you've got multiple !important rules):
让它工作的最简单方法是在 CSS 中添加“!important”以保证它的优先级（除非你有多个 !important 规则）：
td {
padding-left: 10px !important;
}
If you're looking for an answer without !important, you should read into CSS specificity specifications. The linked site has a good explanation of how it works, though basically it goes from most important to least, with id selectors most important, class selectors second, and element selectors third.
如果您正在寻找没有 !important 的答案，您应该阅读CSS 特异性规范。链接的站点对它的工作原理有很好的解释，尽管基本上它从最重要到最不重要，id 选择器最重要，类选择器第二，元素选择器第三。
回答by Andrew Hare
Try this instead:
试试这个：
td.rightColumn * {margin: 0; padding: 0;}
The tdin the external stylesheet is more specific so it wins out. If you qualify the rightColumnclass with an element name then the page-level styles will be applied.
在td外部样式更为具体，因此胜出。如果您rightColumn使用元素名称限定类，则将应用页面级样式。
回答by deanWombourne
You could try adding the ! important flag to your inline css.
您可以尝试添加 ! 内联 css 的重要标志。
e.g.
例如
td { padding-left:10px ! important; }
td {填充左：10像素！重要的; }
Also, for general rules on css rule ordering, have a look at this :
此外，对于 css 规则排序的一般规则，请查看以下内容：
回答by Seb
Do this:
做这个：
.rightColumn *,
td.rightColumn * {
margin: 0;
padding: 0;
}
Precedence in CSS is as follows:
CSS中的优先级如下：
- If some rule has an ID, then it will precede anything else.
- If some rule has a class attribute, it will precede tag-only rules.
- If two rules have both IDs or tags, then the number of them untie the "fight".
- 如果某个规则有一个 ID，那么它将在其他任何规则之前。
- 如果某些规则具有类属性，它将在仅标记规则之前。
- 如果两个规则都有 ID 或标签，那么它们的数量就可以解开“打架”。
Example:
例子：
<style type="text/css">
#myid{
padding: 10px;
}
.class{
padding: 20px;
}
</style>
<div id="myid" class="class"></div>
Although your div has both ID and a class, the ID rule will override the .class rule.
尽管您的 div 既有 ID 又有类，但 ID 规则将覆盖 .class 规则。
To read more about CSS rules priorities, I'd recommend http://www.w3.org/TR/CSS2/cascade.html#specificity.
要阅读有关 CSS 规则优先级的更多信息，我推荐http://www.w3.org/TR/CSS2/cascade.html#specificity。
回答by dancl
ok i admit i'm kind of late to the game here.. but 3 years on i guess i can still shoot for that first place answer..
好吧，我承认我在这里玩游戏有点晚了..但是 3 年过去了，我想我仍然可以争取第一名的答案..
the extra sauce in my answer is that there's an exmaple of css with 2 levels of class name..
我的答案中的额外问题是有一个具有 2 个级别的类名的 css 示例..
in the below example you can see the 'td' with no class gets the ".interval td" style and the td with "indragover" class gets the "table.interval td.indragover" style..
在下面的示例中，您可以看到没有类的 'td' 获得“.interval td”样式，而具有“indragover”类的 td 获得“table.interval td.indragover”样式..
(this code comes is for html drag and drop so there's some javascript applying the 'indragover' class to the td in dragenter, dragleave events)
（此代码用于 html 拖放，因此有一些 javascript 将 'indragover' 类应用于 dragenter、dragleave 事件中的 td）
// put this in a css file
.interval {
height: 100%;
width: 100%;
background: #FFFFCC;
border: 2px solid #000000;
border-collapse: collapse;
}
table.interval tr td {
border: 2px solid black;
color:#112ABB;
background: #FFFFCC;
height: 20px;
}
table.interval td.indragover {
background: #AAAA00;
}
// put this in a html file
<table class="interval">
<tr><td>blah</td><td class="indragover">blah</td></tr>
<tr><td class="indragover">blah</td><td>blah</td></tr>
</table>
回答by asim muhammad
1.div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}
The first line of CSS might seem more specific at first glance, but it's actually the second line above that would be more specific to the font-size of your paragraph.
CSS 的第一行乍一看似乎更具体，但实际上是上面的第二行更具体到段落的字体大小。
An idis more specific than a class, which is more specific than an element.
Anid比 a 更具体，而 aclass比元素更具体。
2.p {font-size: 12px}
p.bio {font-size: 14px}
The second line of CSS (p.bio) is more specific than the first when it comes to your class="bio"paragraph.
p.bio当涉及到您的class="bio"段落时，CSS 的第二行 ( ) 比第一行更具体。
the precedence level of classis higher than the pelement.
的优先级class高于p元素。
