将多个选择器与伪类相关联 [英] Associating multiple selectors with a pseudo-class

问题描述

有一种方法可以有几个选择器与一个伪类相关联吗？

换句话说，如果一个锚，图像或者

我试过这个（在黑暗中拍摄）：

 （a，button，img）：hover，（a，button，img）：focus {
 border：2px 
} 
  

但Webstorm不喜欢它，它不激活。 / p>

我知道这是可行的：

  a：hover，a： focus {
 border：2px black black; 
} 
  

但我想能够将它应用于其他选择器

解决方案

你在黑暗中的镜头实际上是非常接近Selectors 4的建议，除了它采用自己的伪类的形式， ：matches（） （括号和逗号分隔的语法）：

 ：matches（a，button，img）：hover，：matches（a，button，img）：focus {
 border： 
} 
  

可以进一步简化为：

 ：matches（a，button，img）：matches（：hover，：focus）{
 border： 
} 
  

$ b $ p

因为它还没有在内部前缀之外实现，

  a：hover，button：hover，img：hover，
a：focus，button：focus，img：focus {
 border：2px black black; 
} 
  

或者使用预处理器为你做所有繁重的工作。 / p>

Is there a way to have several selectors associated with a pseudo-class?

In other words, I want to make it so if an anchor, image, or button are hovered or focused on, they'll have a special border around them.

I tried this (shot in the dark):

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

But Webstorm doesn't like it, and it doesn't activate.

I know that this works:

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

But I'd like to be able to have it to apply to other selectors as well, without needing to repeat myself many times to apply it to all of them.

解决方案

Your shot in the dark is actually very close to what's proposed for Selectors 4, except it takes the form of its own pseudo-class, :matches() (with the parentheses and the same comma-delimited syntax):

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

which can be further simplified to:

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

As it's not yet implemented outside of internal prefixes, you'll have to make do with writing it all out manually in the meantime:

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

Or make use of a preprocessor to do all the heavy lifting for you.

这篇关于将多个选择器与伪类相关联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！