已指定行内背景色时CSS :hover伪类失效问题及修复咨询

问题根源 #

核心原因是CSS优先级冲突：HTML行内样式（style="background: blue"）的优先级远高于外部/内部CSS中的ul li:hover选择器。行内样式的权重是最高级的，所以hover设置的背景色无法覆盖行内定义的blue。而文字颜色能正常生效，是因为行内样式里没设置color属性，hover的color自然能覆盖默认或继承的颜色。

修复方案 #

推荐优先使用第一种规范方案，第二种仅作应急备选：

• 方案1：移除行内样式，统一用CSS管理
  直接删掉第一个li标签里的style="background: blue"，把所有li的背景色统一写在CSS的ul li规则中。集中管理样式后，hover的优先级就能正常覆盖默认样式，不会再出现冲突。
  示例代码：

  ul li {
    background: blue;
  }
  ul li:hover {
    background: red;
    color: pink;
  }
  

• 方案2：用!important强制提升hover样式优先级（不推荐）
  如果必须保留行内样式，可以在hover的background属性后添加!important，强制让它覆盖行内样式。但要注意，!important会打乱正常的CSS优先级体系，后续维护容易引发其他样式问题，能不用就不用。
  示例代码：

  ul li:hover {
    background: red !important;
    color: pink;
  }
  

内容的提问来源于stack exchange，提问作者Alexandr Nikitin