[英]Multiple :selectors on one CSS element?
I am stylizing a CSS element, and I was wondering if I could use multiple :selectors
on one CSS element. 我正在设计一个CSS元素,我想知道我是否可以在一个CSS元素上使用多个:selectors
。
For instance: 例如:
p:hover:after {
content: "Hello!";
}
Because, when I want the p
to be hovered over, I want the :after
selector to also be called. 因为,当我想要将p
悬停在上面时,我希望也可以调用:after
选择器。
That specific example is completely valid, it works as demonstrated here . 该具体示例完全有效,如此处所示 。
As of now, the main limitation(s) pertaining to pseudo elements, is that: 截至目前,与伪元素有关的主要限制是:
CSS3 Selectors - 7. Pseudo-elements (reference) CSS3选择器 - 7.伪元素 (参考)
Only one pseudo-element may appear per selector , and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. 每个选择器只能出现一个伪元素 ,如果存在,它必须出现在代表选择器主体的简单选择器序列之后 。 Note: A future version of this specification may allow multiple pseudo-elements per selector . 注意:此规范的未来版本可能允许每个选择器使用多个伪元素 。
Thus, neither of the following selectors would work: p:hover:after:after
, p:after:hover
因此,以下两个选择器都不起作用: p:hover:after:after
, p:after:hover
There is no limit on the number of simple selectors that can be chained together within the selector. 可以在选择器中链接在一起的简单选择器的数量没有限制。 And as @BoltClock states in the comments, there can only be one type selector or universal selector. 正如@BoltClock在注释中所述,只能有一个类型选择器或通用选择器。
CSS3 Selectors - 4. Selector syntax (reference) CSS3选择器 - 4.选择器语法 (参考)
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. 一系列简单的选择器是一系列简单的选择器,它们没有被组合器分开。 It always begins with a type selector or a universal selector . 它始终以类型选择器或通用选择器开头 。
Here is a relevantly long selector that works: (example) 这是一个相关的长选择器:( 例子)
#parent:first-of-type:first-child > .child:last-child p:not(#element):not(#otherelement):hover:after
Multiple dynamic pseudo-classes are permissible. 允许多个动态伪类 。
An example of combining dynamic pseudo-classes: 组合动态伪类的示例:
a:focus { background: yellow } a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover. 最后一个选择器匹配伪类中的A元素:focus和伪类:hover。
Illustration: http://jsfiddle.net/BhKuf/ (remember to hover) 插图: http : //jsfiddle.net/BhKuf/ (记得要悬停)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.