HTML code:
HTML代码：
<div class='abc'>
<a>test1</a>
<a class='active'>test2</a>
</div>
CSS code:
CSS代码：
.abc a { color: red; }
.active { color: green; }
Result: DEMO
结果：DEMO
Question:
题：
As you can see, all tag A appear red color, class '.active' doesn't take effect, what caused this result and how to solve it?
如您所见，所有标签A都显示为红色，“。active”类没有生效，导致此结果的原因以及如何解决？
Thanks.
谢谢。
6 个解决方案
#1
10
.abc a consists of a class selector and a type selector.
.abc a由类选择器和类型选择器组成。
.active consists of only a class selector.
.active仅包含一个类选择器。
This means .abc a is more specific. Since they both match the same element and set the same property, the more specific one wins.
这意味着.abc更具体。由于它们都匹配相同的元素并设置相同的属性，因此更具体的元素获胜。
Make the rule you want to apply more specific: .abc a.active.
使您想要应用的规则更具体：.abc a.active。
#2
2
Try:
尝试：
.abc a{color: red}
.abc .active{color:green}
The reason it's not working is because your first line of CSS is more specific than just .active and will always take priority. The more specific the more priority will have.
它不起作用的原因是因为你的第一行CSS比.active更具体，并且总是优先考虑。具体程度越高，优先级就越高。
#3
0
".abc a" takes precedence over ".active" What you are looking for is: .abc .active
“。abc a”优先于“.active”你要找的是：.abc .active
#4
0
you will need to this
你需要这个
Js fiddle
Js小提琴
.abc a{color: red}
a.active{color:green}
#5
0
Try:
尝试：
.abc a{color: red}
a.active{color:green}
To override a property...
要覆盖属性......
#6
0
The problem is because of specifity (like the other answers pointed out). Another way to force this would be to add !important at the end of the style:
问题是因为特殊性（如指出的其他答案）。强制执行此操作的另一种方法是在样式的末尾添加！important：
.active { color: green !important; }
Not the most elegant solution (actually discouraged), but may work in scenarios where coding all of the specifity scenarios would involve too much work (e.g. changing the color of all elements with class active in response to an alert). More information: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
不是最优雅的解决方案（实际上不鼓励），但可能适用于编码所有特定方案场景将涉及太多工作的情况（例如，为了响应警报而更改具有类活动的所有元素的颜色）。更多信息：http：//webdesign.about.com/od/css/f/blcssfaqimportn.htm
#1
10
.abc a consists of a class selector and a type selector.
.abc a由类选择器和类型选择器组成。
.active consists of only a class selector.
.active仅包含一个类选择器。
This means .abc a is more specific. Since they both match the same element and set the same property, the more specific one wins.
这意味着.abc更具体。由于它们都匹配相同的元素并设置相同的属性，因此更具体的元素获胜。
Make the rule you want to apply more specific: .abc a.active.
使您想要应用的规则更具体：.abc a.active。
#2
2
Try:
尝试：
.abc a{color: red}
.abc .active{color:green}
The reason it's not working is because your first line of CSS is more specific than just .active and will always take priority. The more specific the more priority will have.
它不起作用的原因是因为你的第一行CSS比.active更具体，并且总是优先考虑。具体程度越高，优先级就越高。
#3
0
".abc a" takes precedence over ".active" What you are looking for is: .abc .active
“。abc a”优先于“.active”你要找的是：.abc .active
#4
0
you will need to this
你需要这个
Js fiddle
Js小提琴
.abc a{color: red}
a.active{color:green}
#5
0
Try:
尝试：
.abc a{color: red}
a.active{color:green}
To override a property...
要覆盖属性......
#6
0
The problem is because of specifity (like the other answers pointed out). Another way to force this would be to add !important at the end of the style:
问题是因为特殊性（如指出的其他答案）。强制执行此操作的另一种方法是在样式的末尾添加！important：
.active { color: green !important; }
Not the most elegant solution (actually discouraged), but may work in scenarios where coding all of the specifity scenarios would involve too much work (e.g. changing the color of all elements with class active in response to an alert). More information: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
不是最优雅的解决方案（实际上不鼓励），但可能适用于编码所有特定方案场景将涉及太多工作的情况（例如，为了响应警报而更改具有类活动的所有元素的颜色）。更多信息：http：//webdesign.about.com/od/css/f/blcssfaqimportn.htm