0

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

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

4

1 回答 1

4

这是一个特殊性的问题：第一个规则获胜，因为它具有13比第二个更大的特殊性（计算为 1 个伪类和 3 个元素：）（只有 1 个类，没有元素：） 10：你应该改写

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

或 - 一般而言 - 任何其他有效规则，其特异性大于或等于13.

如果您无法更改第二个选择器，您可以简单地!important在属性上使用applyed，但应尽可能少地限制它的使用。

有关详细信息，另请参阅：

于 2013-01-28T12:52:12.700 回答