CSS中:hover伪类与ID选择器结合时的样式失效问题排查

你的猜想完全正确——ID选择器的优先级确实高于类选择器与:hover伪类的组合。

在CSS优先级规则中，不同选择器的权重计算为：

• ID选择器：权重100
• 类选择器/伪类选择器：权重10
• 元素选择器：权重1

你提到的培根图片，ID选择器#bacon设置了background-color: aqua，权重是100；而.food:hover的权重是10+10=20，远低于ID选择器。所以hover时，width属性能生效（因为ID选择器没设置这个属性），但background-color会被ID的设置覆盖，无法变成金色。

解决方案 #

这里有几种可行的处理方式：

1. 提高hover选择器的权重
   直接把ID加入hover选择器，让其权重超过单独的ID选择器：

#bacon:hover {
  width: 250px;
  background-color: goldenrod;
}

这个选择器的权重是100（ID）+10（伪类）=110，能覆盖单独#bacon的样式。

2. 使用!important强制覆盖（不推荐滥用）
   如果想保留类hover的统一样式，可以给background-color加上!important，强制跳过优先级规则：

.food:hover {
  width: 250px;
  background-color: goldenrod !important;
}

注意：!important会打破正常的优先级逻辑，除非万不得已，尽量少用，避免后续样式维护混乱。

3. 用类代替ID（如果允许的话）
   如果这个ID不是必须的（比如不需要用JS获取元素），可以把#bacon改成类.bacon，这样类选择器的权重和.food一致，后续的hover样式就能正常覆盖：

.bacon {
  background-color: aqua;
}

.food:hover {
  width: 250px;
  background-color: goldenrod;
}

内容的提问来源于stack exchange，提问作者Jayant Verma