CSS类优先级

时间:2009-07-13 15:31:04

标签: css list class css-specificity

我对今天遇到问题后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>

4 个答案:

答案 0 :(得分:26)

这听起来像CSS specificity问题。尝试将.selectedItem规则集更改为:

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

答案 1 :(得分:17)

简短的回答是你的.selectedItem样式没有得到应用,因​​为之前的样式更具体,因此具有更高的优先级。这是一个decent rundown

  

现在,让我们列出一个   CSS的内部优先级(3有   最高优先级):

element
.class
#id
     

这是默认的优先顺序。在   除此之外,特异性还会   还算,f.ex ul 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 specification

答案 2 :(得分:7)

selectedItem规则更改为:

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

答案 3 :(得分:3)

cletus'帖子没有提到的一小部分 根据{{​​1}}链接,最高优先级是html元素/标记中使用的W3C属性。

E.g。如果你有

style

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

颜色为<style> #bar { color: blue; } </style> ,因为内联html样式的优先级最高,高于red