CSS无法正常使用HTML标记a

Question

HTML代码:

<div class='abc'>
    <a>test1</a>
    <a class='active'>test2</a>
</div>

CSS代码:

.abc a { color: red; }
.active { color: green; }

结果:DEMO

问题:

如您所见,所有标签A都显示为红色,".active"类没有生效,导致此结果的原因以及如何解决？

谢谢.

Answer 1

.abc a 由类选择器和类型选择器组成.

.active 仅包含一个类选择器.

这意味着.abc a更具体.由于它们都匹配相同的元素并设置相同的属性,因此更具体的元素获胜.

使您想要应用的规则更具体:.abc a.active.