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 特异性问题。 尝试将您的 .selectedItem 规则集更改为：

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

Answer 2

简而言之，您的 .selectedItem 样式没有被应用，因为以前的样式更具体，因此具有更高的优先级。 这是一个不错的概要：

现在，让我们列出一个总体列表
CSS 的内部优先级（3 具有
最高优先级）：

<前><代码>元素
。班级
＃ID

这是默认的优先级顺序。 在
除此之外，特异性将
也算，f.ex ul li 将覆盖
李。 W3C 已经做出了不错的表
你应该如何计算内部
重量：

LI {...} /* a=0 b=0 c=1 ->   特异性 = 1 */ 
  UL LI {...} /* a=0 b=0 c=2 ->   特异性 = 2 */ 
  UL OL LI {...} /* a=0 b=0 c=3 ->   特异性 = 3 */ 
  LI.red {...} /* a=0 b=1 c=1 ->   特异性 = 11 */ 
  UL OL LI.red {...} /* a=0 b=1 c=3 ->   特异性 = 13 */ 
  #list {...} /* a=1 b=0 c=0 ->   特异性 = 100 */ 
  

这是W3C 规范。

Answer 3

将 selectedItem 规则更改为：

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

Answer 4

cletus 的帖子中没有提到的一个小补充。
根据W3C链接，最高优先级是html元素/标签中使用的style属性。

例如，如果你有

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

and

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

颜色将为red，因为内联html样式具有最高优先级，高于#。