CSS类优先级

Question

今天遇到问题后，我对CSS类的优先级有疑问。这种情况如下：

我有与它关联的类的无序列表。 LI标签也有一些样式。我想在点击后更改LI的样式（通过添加"selected"类），但添加的类的样式从不应用。这是正常行为还是应该这个代码工作？

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：

<ul class="dynamicList"> 
    <li>First Item</li> 
    <li class="selectedItem">Second (Selected) Item</li> 
</ul> 

的"selected"列表项的背景颜色不会改变。这也是如此，如果我不将样式应用到LI元素，但创建另一个类并应用到所有列表项，所以它读取..

<li class="listitem selectedItem">xxxx</li> 

Answer 1

这听起来像一个CSS specificity问题。试着改变你的.selectedItem规则集：

.dynamicList li.selectedItem { 
    background-color: #0000ff; 
} 

Answer 2

简短的回答是，你的.selectedItem风格没有得到应用，因​​为以前的风格更具体，因此具有更高的优先级。这里是一个decent rundown：

现在，让我们的 内部优先级的对CSS的常规列表（3具有最高的优先级 ）：

element 
.class 
#id 

这是默认优先顺序。在 除此之外，特异性会 也算，f.ex UL李将覆盖 里。 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 */ 

这里是W3C specification。

Answer 3

更改selectedItem规则：不是由克莱帖子中提到的

.dynamicList li.selectedItem 
{ 
    background-color: #0000ff; 
} 

Answer 4

少量添加。
按照W3C链路，最高优先级是在html元素/标签使用的style属性。

E.g.如果你有

<a id= bar style="color: red">foo</a> 

和

<style> 
#bar { 
    color: blue; 
} 
</style> 

的颜色会red因为内嵌HTML样式具有最高优先级，比#更高。