css - 为什么#my_id 覆盖 .my_class :hover in 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

基本上，因为您已经使用元素 ID 设置了不透明度属性，所以它也在设置悬停、焦点、事件等状态。

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

ID > 类