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 个类,无元素:)具有更大的特异性(计算为 1 个伪类和 3 个元素:
) :你应该改写13
) >10
ul li:nth-child(even) a.active {
text-shadow: none;
}
或者 - 通常 - 特异性大于或等于 13
的任何其他有效规则。
如果您无法更改第二个选择器,您可以简单地使用应用于该属性的 !important
,但应尽可能少地使用它。
有关更多信息,另请参阅:
- 关于 specificity (MDN) 的引用;
- 这篇关于 Smashing Magazine 的文章关于特异性以及如何计算它。
关于html - 文字阴影覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14562426/