CSS 类优先级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1120174/
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 class priorities
提问by Stuart
I have a question about the priority of CSS classes after encountering a problem today. The situation is as follows:
今天遇到一个问题，想问一下CSS类的优先级问题。情况如下：
I have an unordered list which has a class associated with it. The LItags have some styles defined too. I want to change the styling of the LIs after a click (via an added "selected"class), but the added class's styles are never applied. Is this normal behavior or should this code work?
我有一个无序列表，它有一个与之关联的类。该LI标签具有定义得太一些风格。我想LI在单击后更改s的样式（通过添加的"selected"类），但从未应用添加的类的样式。这是正常行为还是这段代码应该工作？
CSS:
CSS：
.dynamicList
{
list-style: none;
}
.dynamicList li
{
display: block;
width: 400px;
height: 55px;
padding: 10px 10px 10px 10px;
border: 1px solid #000;
background-color: #ff0000;
}
.selectedItem
{
background-color: #0000ff;
}
HTML:
HTML：
<ul class="dynamicList">
<li>First Item</li>
<li class="selectedItem">Second (Selected) Item</li>
</ul>
The background color of the "selected"list item isn't changed. This is also the case if I don't apply the style to the LIelement, but create another class and apply that to all the list items so it reads..
"selected"列表项的背景颜色不会改变。如果我不将样式应用于LI元素，而是创建另一个类并将其应用于所有列表项，以便它读取..
<li class="listitem selectedItem">xxxx</li>
回答by John Topley
This sounds like a CSS specificityproblem. Try changing your .selectedItemruleset to:
这听起来像是一个CSS 特异性问题。尝试将您的.selectedItem规则集更改为：
.dynamicList li.selectedItem {
background-color: #0000ff;
}
回答by cletus
The short answer is that your .selectedItem style isn't getting applied because the previous style is more specific and thus has a higher priority. Here is a decent rundown:
简短的回答是您的 .selectedItem 样式没有得到应用，因为以前的样式更具体，因此具有更高的优先级。这是一个体面的纲要：
Now, let's make a general list of the internal priorities for CSS (3 has the highest priority):
element .class #idThis is the default priority order. In addition to this, specificity will also count, f.ex ul li will override li. W3C has made a decent table over how you should calculate internal weight:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */ LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ #list {...} /* a=1 b=0 c=0 -> specificity = 100 */
现在，让我们列出 CSS 的内部优先级（3 具有最高优先级）：
element .class #id这是默认的优先级顺序。除此之外，特异性也很重要，f.ex ul li 将覆盖 li。W3C 已经就如何计算内部权重做了一个不错的表格：
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */ LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ #list {...} /* a=1 b=0 c=0 -> specificity = 100 */
And here is the W3C specification.
这是W3C 规范。
回答by Matt Bridges
Change the selectedItemrule to:
将selectedItem规则更改为：
.dynamicList li.selectedItem
{
background-color: #0000ff;
}
回答by Timo
A small addition that was not mentioned by cletus' post.
According to the W3Clink, the highest priority is the styleattribute used in the html element/tag.
cletus 的帖子中没有提到的一个小补充。
根据W3C链接，最高优先级是stylehtml元素/标签中使用的属性。
E.g. if you have
例如，如果你有
<a id= bar style="color: red">foo</a>
and
和
<style>
#bar {
color: blue;
}
</style>
The color will be redbecause the inline html style has the highest priority, higher than #.
颜色将是red因为内联 html 样式具有最高优先级，高于#.
