SCSS文件中:active伪类不生效，hover、focus正常如何排查解决

DevOps 小满

2026-10-2

问题根因与解决方法

导致a标签:active伪类不生效的常见原因及对应解决方案如下：

伪类顺序不符合LVHA规则
CSS中a标签的四个状态伪类需要严格遵循 :link → :visited → :hover → :focus → :active 的书写顺序，顺序错误时靠后的伪类样式会覆盖前面的样式，:active 写在:hover/:focus之前就会被覆盖失效。
调整你的SCSS伪类顺序即可：

li {
    display: inline-block;
    font-size: 18px;      

    a {
        display: inline-block;
        color:$secondary;
        padding: 17px;
        // 按正确顺序书写伪类
        &:link {}
        &:visited {}
        &:hover { /* 你原有的hover样式 */ }
        &:focus { /* 你原有的focus样式 */ }
        &:active {
            padding: 10px; 
            background : blue;
            font-weight: bold;
        } 
    }                 
}

移动端测试场景的兼容问题
移动端浏览器默认不会触发:active伪类，需要额外做兼容处理：
1. 在HTML头部添加视口元标签：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
1. 添加全局样式清除移动端默认点击高亮，同时可触发:active状态：
```
body {
    -webkit-tap-highlight-color: transparent;
}
```
1. 可以通过JS全局绑定空touchstart事件兼容低版本移动端浏览器：
```
document.addEventListener('touchstart', function () {}, false)
```
高优先级样式覆盖
可以打开浏览器开发者工具，选中对应a标签后手动开启:active状态模拟，查看:active对应的样式是否被划掉。如果被划掉说明有更高优先级的选择器定义了同名样式，你可以提高当前选择器的优先级（比如写成nav ul li a:active），或者临时加!important验证是否是优先级问题。
触发时间过短未观察到
:active仅在鼠标按下未松开、或者触摸未抬手时生效，如果点击速度过快可能看不到效果，可以给a标签添加过渡效果方便观察：
```
a {
    transition: all 0.3s ease;
}
```