将多个选择器与伪类相关联

Question

有没有办法让几个选择器与伪类相关联？

换句话说,我想这样做,如果锚,图像或按钮悬停或聚焦,它们周围会有一个特殊的边框.

我试过这个(在黑暗中拍摄):

(a,button,img):hover, (a,button,img):focus {
    border: 2px dashed black;
}

但是Webstorm并不喜欢它,也没有激活它.

我知道这有效:

a:hover, a:focus {
    border: 2px dashed black;
}

但我希望能够将其应用于其他选择器,而无需多次重复自己将其应用于所有选择器.

Answer 1

你在黑暗中的镜头实际上非常接近于为Selectors 4提出的镜头,除了它采用自己的伪类的形式:matches()(用括号和相同的逗号分隔语法):

:matches(a, button, img):hover, :matches(a, button, img):focus {
    border: 2px dashed black;
}

可以进一步简化为:

:matches(a, button, img):matches(:hover, :focus) {
    border: 2px dashed black;
}

由于它尚未在内部前缀之外实现,因此您必须在此期间手动编写全部内容:

a:hover, button:hover, img:hover,
a:focus, button:focus, img:focus {
    border: 2px dashed black;
}

或者使用预处理器为您完成所有繁重的工作.