为什么#my_id覆盖.my_class：在CSS中悬停？

Question

应用于ID的CSS规则具有比类规则更高的优先级，这是有道理的。我没有得到的是为什么：

<div id="global_button" class="global_button_class"></div>

#global_button
{
   opacity:0.7;
}

.global_button_class:hover
{
   opacity:1;
}

...当鼠标悬停在按钮上时不会改变不透明度，但是如果我改变了：

.global_button_class:hover

...为：

#global_button:hover

......它有效。我的意思是，如果悬停状态没有由id定义，为什么.global_button_class:hover没有启动？

Answer 1

您好已经习惯了

#global_button.global_button_class:hover{
opacity:1;
}

的 LIve demo 的

因为define opacity into ID或id值超过高 class

ID value is  == 100
Class value is == 10

Answer 2

这完全取决于特异性（解释得更好here）。基本上，优先顺序是id类元素。

Malarkey对George Lucas stylee（css precedence explained）

给出了一个很好的倾斜

Answer 3

基本上因为你已经使用元素ID设置了opacity属性，所以它也设置了悬停，焦点，活动等状态。

当您尝试使用附加的类名设置悬停状态时，它会被先前声明的ID覆盖，该ID比类更重要。

ID＆gt; CLASS

Answer 4

解决方案不会只是：

<div id="global_button"></div>

#global_button {
opacity:0.7;
}

#global_button:hover {
opacity:1;
}