文章/答案/技术大牛

发布

问文本阴影覆盖
EN

Stack Overflow用户

提问于 2013-01-28 20:49:42

回答 1查看 2K关注 0票数 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;
}

并且第二列表项仍然具有阴影。为什么？

回答已采纳

发布于 2013-01-28 20:52:13

这是一个特异性问题:第一条规则胜出，因为它比第二条规则(只有1个类，没有元素：10)具有更大的特异性(计算为1个伪类和3个元素：13)：您应该改为编写

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

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

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

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14562426

复制

相似问题

问文本阴影覆盖EN