CSS级联规则下a标签:hover与:active伪类失效最优解决方案咨询

问题根源 #

你遇到的hover、active样式失效，本质是同优先级CSS规则后写覆盖先写的特性导致的：所有伪类选择器优先级相同，你把:visited写在:hover、:active之后，已访问过的链接的:visited样式会覆盖前面定义的:hover、:active样式。

你提到的:not方案可行性 #

这个方案可以实现需求，但不推荐使用，原因如下：

• 可读性差：非常规写法，其他维护者很难第一时间理解该选择器的设计目的
• 维护成本高：如果后续需要新增:focus等其他交互伪类，你需要同步修改所有:not选择器的参数，很容易遗漏
• 不必要的兼容性负担：虽然现代浏览器都支持:not选择器，但该写法完全可以用更通用的方案替代，没必要引入额外的兼容性风险

行业通用最佳实践 #

遵循标准的LVHA伪类书写顺序即可完美解决问题，四个伪类固定按以下顺序书写：

/* 未访问链接 */
a:link {
  color: red;
}
/* 已访问链接 */
a:visited {
  color: brown;
}
/* 鼠标悬停 */
a:hover {
  color: green;
}
/* 点击激活 */
a:active {
  color: blueviolet;
}

顺序原理 #

同优先级规则下后定义的规则覆盖先定义的：

• 链接未访问时命中:link规则，无其他状态触发时就使用该样式
• 链接访问后命中:visited规则，优先级高于先写的:link，覆盖未访问样式
• 鼠标悬停时命中:hover规则，优先级高于先写的:link、:visited，覆盖对应样式
• 点击时命中:active规则，优先级高于前面三个，覆盖对应样式

解决你担心的顺序易变动问题 #

可以通过工具强约束避免人为失误：

• 接入stylelint等CSS校验工具，开启selector-pseudo-class-order规则，强制校验a标签伪类书写顺序，不符合规范的代码无法提交
• 把LVHA顺序纳入团队CSS编码规范，作为通用开发准则执行

额外说明 #

不建议使用!important解决该问题，!important会破坏正常的级联规则，后续如果要覆盖该样式需要写优先级更高的规则或者再加!important，会导致样式维护越来越混乱。

内容的提问来源于stack exchange，提问作者mehran saghebi fard