我对今天遇到问题后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>
答案 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 */
答案 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
。