已设置background-color的li元素:hover伪类失效问题求助

你遇到的问题是内联样式优先级过高导致的。HTML元素的style属性（也就是你写在<li>标签里的style="background:coral"）属于内联样式，它的CSS优先级权重远高于普通的标签选择器（比如li:hover）。所以当鼠标悬停时，li:hover定义的黑色背景无法覆盖内联的珊瑚色背景，只有原本没有内联背景的Block3、4能正常显示hover效果。

方案1：用!important强制覆盖内联样式（快速临时解决） #

修改CSS中的hover规则，添加!important提升优先级：

li:hover {
    background-color: black !important;
}

方案2：移除内联样式，改用CSS类（推荐，符合最佳实践） #

1. 在<style>中新增一个类来定义珊瑚色背景：

li.coral-bg {
    background-color: coral;
}

li:hover {
    background-color: black;
}

2. 修改HTML中的列表项，用类替代内联样式：

<li class="coral-bg">Block 1</li>
<li class="coral-bg">Block 2</li>

这种方式避免了内联样式的优先级问题，也让样式代码更集中、易维护。

方案3：属性选择器匹配内联样式（不推荐，灵活性差） #

如果必须保留内联样式，可以用属性选择器精准匹配带珊瑚色背景的<li>，再结合!important：

li[style*="background:coral"]:hover {
    background-color: black !important;
}

但这种写法依赖内联样式的具体内容，后续修改内联样式时需要同步调整CSS，不够灵活。

内容的提问来源于stack exchange，提问作者Neha Agarwal