html - CSS 不能与 HTML 标签一起正常工作

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 更多 specific .由于它们都匹配相同的元素并设置相同的属性，因此更具体的获胜。

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