html - 文字阴影覆盖

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 个类，无元素:)具有更大的特异性(计算为 1 个伪类和 3 个元素:13) >10) :你应该改写

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

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

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

---

有关更多信息，另请参阅:

• 关于 specificity (MDN) 的引用;
• 这篇关于 Smashing Magazine 的文章关于特异性以及如何计算它。