HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">About</a></li>
</ul>
CSS
ul li:nth-child(even) a {
text-shadow: 1px 1px 1px red;
}
.active {
text-shadow: none;
}
第二个列表项仍然有阴影。为什么呢?
答案 0 :(得分:4)
这是一个特殊问题:第一条规则获胜,因为它具有更大的特异性(计算为1个伪类和3个元素:13
)而不是第二个(仅1个类,没有元素:10
):你应该改为编写
ul li:nth-child(even) a.active {
text-shadow: none;
}
或 - 通常 - 具有大于或等于13
的特异性的任何其他有效规则。
如果您无法更改第二个选择器,则只需在属性上使用!important
,但应尽量减少其使用。
有关详细信息,另请参阅: