探究:active与:focus伪类的关联及显示优先级问题

嘿，我完全懂你说的这个情况——这其实是浏览器处理交互状态的顺序，加上CSS规则优先级共同导致的结果！

先还原你遇到的场景代码，应该是类似这样的：

a {
  color: blueviolet; /* 默认蓝紫色 */
}
a:focus {
  color: green; /* 焦点状态：绿色 */
}
a:active {
  color: yellow; /* 激活状态：黄色 */
}

为什么看不到:active状态？ #

当你点击链接的时候，浏览器的交互流程是这样的：

• 按下鼠标的瞬间，链接触发:active状态，理论上应该显示黄色
• 但几乎在同一毫秒内，因为链接是可聚焦交互元素，浏览器会自动给它加上:focus焦点状态
• 而CSS里的伪类（:focus、:active）优先级是完全相同的，这时候谁的规则写在后面，谁的样式就会覆盖前面的。你的代码里:focus规则应该是写在:active之后的，所以当元素同时处于两个状态时，:focus的绿色就会把:active的黄色覆盖掉，导致你只能看到颜色从蓝紫色跳转到绿色，完全看不到黄色的:active状态。

为什么移除:focus就能看到:active？ #

当你删掉a:focus规则后，点击链接时，元素只会触发:active这一个状态，没有其他同优先级的样式来覆盖它，所以就能正常看到黄色的激活状态了。

怎么让:active状态显示出来？ #

如果你想同时保留:focus样式，又能看到:active的效果，只需要调整CSS规则的顺序，把:active放在:focus后面就行：

a {
  color: blueviolet;
}
a:focus {
  color: green;
}
a:active {
  color: yellow; /* 移到:focus后面，同优先级下后定义的生效 */
}

这样操作时：按下鼠标会显示黄色（:active生效），松开鼠标后如果链接还保持焦点（比如没跳转页面），就会变回绿色（:focus生效），完美兼顾两种状态~

内容的提问来源于stack exchange，提问作者john c. j.