CSS伪类求助：Active类与Hover类在多浏览器中无法正常生效

核心原因：伪类顺序不符合规则 #

CSS伪类的生效优先级由声明顺序决定，必须严格遵循 LVHA 规则：

• :link（未访问的链接）
• :visited（已访问的链接）
• :hover（鼠标悬停）
• :active（点击激活）

如果顺序颠倒（比如把:active写在:hover之前），不同浏览器对伪类优先级的解析差异就会导致样式表现不一致——这正是你遇到Firefox、Chrome/Brave表现矛盾的关键原因。

修复步骤 #

1. 调整伪类书写顺序
   锚链接的样式必须按以下顺序编写，即使不需要:link和:visited，也要保证:hover在:active之前：

   /* 未访问链接样式（可选） */
   a.button:link {
     background-color: #ccc;
   }
   /* 已访问链接样式（可选） */
   a.button:visited {
     background-color: #ccc;
   }
   /* 鼠标悬停样式 */
   a.button:hover {
     background-color: #eee;
   }
   /* 点击激活样式 */
   a.button:active {
     background-color: #999;
   }
   

2. 排查选择器优先级冲突
   用浏览器开发者工具查看元素样式面板，确认:hover或:active的样式是否被更高优先级的选择器（如带ID的选择器、内联样式）覆盖（被覆盖的样式会被划掉）。若有冲突，可适当提升目标选择器的优先级（比如增加类名前缀）。

3. 排除JavaScript干扰
   检查锚链接绑定的点击事件，确认是否有preventDefault()或其他逻辑阻止了浏览器默认的:active状态触发。

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