我有这样的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
但是我可以使用div#header .headermenu li a:hover
来应用此悬停。
为什么?所有其他的syles都应用在.headermenu选择器下,但悬停不是为什么?
答案 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;}