Question

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

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

Answer 1

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

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

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

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

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