CSS无法与HTML标签一起正常使用

Question

HTML code:

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

CSS code:

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

Result: 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?

Thanks.

Answer 1

.abc a consists of a class selector and a type selector.

.active consists of only a class selector.

This means .abc a is more specific . Since they both match the same element and set the same property, the more specific one wins.

Make the rule you want to apply more specific: .abc a.active .

Answer 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.

Answer 3

“ .abc a”优先于“ .active”，您正在寻找的是：.abc .active

Answer 4

you will need to this

Js fiddle

  .abc a{color: red}

  a.active{color:green}

Answer 5

Try:

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

To override a property...

Answer 6

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:

.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 (eg 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