CSS无法正常使用HTML标记a

Question

HTML code：

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

CSS代码：

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

结果：DEMO

问题：

正如您所看到的，所有标签A都显示为红色，类别为“。”＆＃39;是什么原因导致这个结果以及如何解决？

感谢。

Answer 1

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

.active只包含一个类选择器。

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

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

Answer 2

尝试：

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

它不工作的原因是因为你的第一行CSS比.active更具体，并且总是优先考虑。具体程度越高，优先级越高。

Answer 3

＆＃34; .abc＆＃34;优先于＆＃34; .active＆＃34; 你在寻找的是： .abc .active

Answer 4

你需要这个

Js小提琴

  .abc a{color: red}

  a.active{color:green}

Answer 5

尝试：

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

覆盖属性......

Answer 6

问题是因为特殊性（如指出的其他答案）。强制执行此操作的另一种方法是在样式的末尾添加！important：

.active { color: green !important; }

不是最优雅的解决方案（实际上不鼓励），但可能适用于编码所有特定方案场景将涉及太多工作的情况（例如，为了响应警报而更改具有类活动的所有元素的颜色）。更多信息：http://webdesign.about.com/od/css/f/blcssfaqimportn.htm