如何使:focus、:active与:hover相同

在CSS2/3中,目前没有更好的方法。

但是,您可能希望使用 cssnext 使用 @custom-selectors 和 :matches() 今天的语法。

具有 @自定义选择器 :

@custom-selector: --enter :hover, :focus, :active;

a:--enter { ... }

具有 :is() (是 :matches ,现已重命名为 :is() :

a:is(:hover, :focus, :active) { ... }

:hover , :active 和 :focus 作为三个独立的伪类存在是有原因的。匹配这些伪类之一的元素不会自动匹配其他两个(即使它们不是互斥的,即一个元素可以同时匹配其中的两个或三个)。

不可能通过CSS或编程方式强制元素与动态伪类匹配。如果要将样式应用于所有三种状态的元素,则必须指定它们。

选择器4 :matches() 将减轻重复性:

.class a:matches(:hover, :active, :focus)

但目前还没有在任何地方实现它。