CSS奇怪的悬停行为

Question

I have a html like this;

<div id = "header">
        <a href ="#">Panel</a>
        <ul class="headermenu">
            <li><a href="">asdas</a></li>
            <li><a href="">asdasd</a></li>
        </ul>
</div>

and css like this;

*{
    padding:0px;
    margin:0px;
    font-family: "Open Sans",Arial, Verdana;
    font-weight:100;
}

ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
}

div#header{
 margin:40px;   
}

div#header a{
    color:#B2B4B8;
    line-height:40px;
    display:block;
    float:left;
}


.headermenu li{
    float:left;
}

.headermenu li a{
    display:block;
    margin-left:20px;
    font-size:12px;
}

.headermenu li a:hover{
    color:#000;
}

.headermenu{
    float:right;
    margin-right:20px;
}

I could not apply white color to hover of a of ul which has a class named headermenu, using .headermenu li a:hover

However I can apply this hover using div#header .headermenu li a:hover .

WHY? The all other syles are applied under .headermenu selector, but hover could not why?

JSFiddle

Answer 1

Your div#header a{ is setting the color, and an ID element will always take precedence over any class based element.

So your class based hover line, is being ignored.

Answer 2

It's due to selector specificity. Your ID element has higher specificity than the class element and since both of them determine the color of your element, ID takes precedence.

More details: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

I found this very helpful when learning about css rules: http://specificity.keegan.st/

Answer 3

just add !important in your hover css

.headermenu li a:hover{ color:#000 !important; }

or try this:

div#header .headermenu li a:hover{ color:#000;}