text-shadow覆盖

时间:2013-01-28 12:49:42

标签: html css css3

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;
}

第二个列表项仍然有阴影。为什么呢?

1 个答案:

答案 0 :(得分:4)

这是一个特殊问题:第一条规则获胜,因为它具有更大的特异性(计算为1个伪类和3个元素:13)而不是第二个(仅1个类,没有元素:10 ):你应该改为编写

ul li:nth-child(even) a.active {
   text-shadow: none;
}

或 - 通常 - 具有大于或等于13的特异性的任何其他有效规则。

如果您无法更改第二个选择器,则只需在属性上使用!important,但应尽量减少其使用。


有关详细信息,另请参阅: