如何设置:active选择器无外轮廓与边框，解决:focus样式覆盖问题

问题原因 #

触发元素:active状态时，元素会同时命中:focus伪类规则，二者CSS优先级完全相同。按照CSS层叠逻辑，后声明的样式会覆盖先声明的同名样式，你现有代码中:active规则写在:focus之前，因此:focus的外轮廓配置会覆盖:active中的对应设置。

解决方法 #

方案1（推荐）：调整伪类声明顺序 #

将:active规则放在:focus之后即可，同优先级下后声明的规则优先生效：

:focus {
  outline: 2px solid green; 
}

:active {
  color: blue;
  outline: none;
  border: none;
}

方案2（备选）：提升:active优先级 #

如果无法调整样式声明顺序，可以给:active的相关属性添加!important提升优先级，注意不要滥用!important，仅作为应急方案使用：

:active {
  color: blue;
  outline: none !important;
  border: none !important;
}

:focus {
  outline: 2px solid green; 
}

方案3：限定作用域提升优先级 #

如果是仅针对链接设置样式，可以将伪类选择器写得更具体，比如a:active，特定选择器优先级高于通用伪类选择器，也能实现效果。

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