CSS奇怪的悬停行为

时间:2014-08-15 13:54:25

标签: html css hover

我有这样的HTML;

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

和css这样;

*{
    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;
}

我无法使用.headermenu li a:hover

将白色悬停在具有名为headermenu的类的ul中

但是我可以使用div#header .headermenu li a:hover来应用此悬停。

为什么?所有其他的syles都应用在.headermenu选择器下,但悬停不是为什么?

JSFiddle

3 个答案:

答案 0 :(得分:0)

您的div#header a{正在设置颜色,ID元素将始终优先于任何基于类的元素。

所以你的基于类的悬停线被忽略了。

答案 1 :(得分:0)

这是由于选择者的特异性。您的ID元素具有比class元素更高的特异性,并且因为它们都决定了元素的颜色,所以ID优先。

更多细节: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

在了解css规则时,我发现这非常有用: http://specificity.keegan.st/

答案 2 :(得分:0)

在你的悬停css中添加!important

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

或试试这个:

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