CSS奇怪的悬停行为答案

【问题标题】：CSS Strange hover behaviorCSS奇怪的悬停行为
【发布时间】：2014-08-15 22:16:54
【问题描述】：

我有一个这样的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 应用此悬停。

为什么？所有其他样式都在 .headermenu 选择器下应用，但是悬停不能为什么？

JSFiddle

【问题讨论】：

如果您不能提供更具体的选择器，请使用 !important: .headermenu li a:hover { color: #000 !important; }
它有效。但我为什么需要这个？
正如@Lee 提到的，ID 选择器优先于类选择器。
你也可以#header ul li a { color: #000; }
最后一点，您可能应该为 headermenu 使用 ID。我猜你不会有多个标题菜单？

标签： html css hover

【解决方案1】：

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

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

【讨论】：

不应该“div#header a{”设置标签的颜色吗？它不应该设置鼠标悬停的颜色
这不是设置悬停颜色，而是您尝试进行悬停颜色的尝试被忽略，因为整个标签的 ID 优先。您应该删除基于 ID 的规则，并改用基于类的规则。
但是为什么会被忽略呢？我使用的其他属性在 .headermenu 下没有被忽略
因为你没有在 ID 类中使用过它们。您的 ID 中有 color:#B2B4B8;line-height:40px;display:block;float:left;。您的 CLASS 样式中有 display:block;margin-left:20px;font-size:12px;。这些没有被复制，因此被设置。抱歉，我可能没有以最好的方式解释这一点。
我不是很懂，但我猜你的答案是对的

【解决方案2】：

这是由于选择器的特殊性。您的 ID 元素比 class 元素具有更高的特异性，并且由于它们都决定了您的元素的颜色，因此 ID 优先。

我发现这在学习 CSS 规则时很有帮助： http://specificity.keegan.st/

【讨论】：

【解决方案3】：

只需在悬停 CSS 中添加 !important

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

或者试试这个：

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

【讨论】：