css - 为什么#my_id 会覆盖 CSS 中的 .my_class:hover？

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启动？

score 1 · Accepted Answer

嗨，现在习惯了

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

因为你的define opacity intoid 或idvalue不高 class

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

score 1 · Accepted Answer

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

Malarkey 对它有一个很好的倾向 George Lucas stylee （解释了 css 优先级）

score 1 · Accepted Answer

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

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

编号 > 类别

score 0 · Accepted Answer

解决方案不就是：

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

#global_button {
opacity:0.7;
}

#global_button:hover {
opacity:1;
}

4 回答 4