25

今天遇到一个问题后，我对CSS类的优先级提出了疑问。情况如下：

我有一个无序列表，它有一个与之关联的类。标签也定义了LI一些样式。我想LI在单击后更改 s 的样式（通过添加的"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>
4

4 回答 4

26

这听起来像是一个CSS 特异性问题。尝试将您的.selectedItem规则集更改为：

.dynamicList li.selectedItem {
  background-color: #0000ff;
}
于 2009-07-13T15:35:11.167 回答
17

简短的回答是您的 .selectedItem 样式没有得到应用，因​​为以前的样式更具体，因此具有更高的优先级。这是一个不错的概要：

现在，让我们列出 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 */

这里是W3C 规范。

于 2009-07-13T15:33:56.847 回答
7

selectedItem将规则更改为：

.dynamicList li.selectedItem
{
    background-color: #0000ff;
}
于 2009-07-13T15:36:56.327 回答
2

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

例如，如果你有

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

和

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

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

于 2013-08-09T07:34:34.500 回答