Safari浏览器中<li>元素CSS背景色与hover效果失效问题求助

我之前也在Safari里碰到过类似的CSS渲染优先级问题，结合你的代码和描述，给你几个针对性的排查和解决方向：

1. 移除-webkit-appearance: button属性 #

这大概率是核心问题！Safari对-webkit-appearance: button的处理会强制让元素模拟原生按钮的样式，直接覆盖你自定义的背景色、hover状态等样式，甚至会导致DevTools里修改CSS都不生效。

修改你的CSS：

.acet-sum-item--clear a { 
    color: #fff; 
    display: inline-block; 
    text-align: center; 
    border-radius: .15rem; 
    background-color: #999; 
    font-size: .65rem; 
    padding: 0 1.5em; 
    line-height: 1.3rem; 
    font-weight: 400; 
    border: none; 
    margin: 0 .4rem 1rem .5rem; 
    /* 移除这个属性，或者改成none */
    -webkit-appearance: none; 
    cursor: pointer; 
    margin-left: 0; 
} 

2. 提升CSS选择器优先级 #

如果移除上述属性后还是没效果，可能是有更高优先级的CSS规则（比如ID选择器、行内样式）在Safari中覆盖了你的样式。你可以：

• 打开Safari DevTools的「Computed」面板，查看background-color的最终生效规则，找到被覆盖的原因
• 给你的选择器增加优先级，比如结合父元素：

ul .acet-sum-item--clear a {
    /* 保留原样式 */
}
ul .acet-sum-item--clear a:hover {
    /* 保留原hover样式 */
}

• 临时用!important验证（不推荐长期使用，仅用于排查）：

.acet-sum-item--clear a {
    background-color: #999 !important;
}
.acet-sum-item--clear a:hover {
    background-color: #20558a !important;
}

3. 检查伪元素是否遮挡交互 #

你的链接文本里提到了::after伪元素，如果这个伪元素的宽高覆盖了a标签，会导致hover事件被伪元素拦截，无法触发a标签的hover状态。可以给伪元素添加：

.acet-sum-item--clear a::after {
    pointer-events: none;
}

让鼠标事件穿透伪元素，直接作用到下方的a标签上。

4. 验证Safari兼容性细节 #

虽然概率较低，但可以快速验证：

• 把rem单位换成px，看看旧版Safari是否对rem支持有问题
• 给hover状态添加transition属性，强制Safari识别状态变化：

.acet-sum-item--clear a {
    transition: background-color 0.2s ease;
}

先从第1点开始排查，这是Safari处理自定义按钮样式时最常见的坑，应该能解决你的问题。

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