多个：一个CSS元素上的选择器？

Question

我正在设计一个CSS元素，我想知道我是否可以在一个CSS元素上使用多个:selectors 。

例如：

p:hover:after {
    content: "Hello!";
}

因为，当我想要将p悬停在上面时，我希望也可以调用:after选择器。

Answer 1

该具体示例完全有效，如此处所示 。

截至目前，与伪元素有关的主要限制是：

CSS3选择器 - 7.伪元素 （参考）

每个选择器只能出现一个伪元素 ，如果存在，它必须出现在代表选择器主体的简单选择器序列之后 。 注意：此规范的未来版本可能允许每个选择器使用多个伪元素 。

因此，以下两个选择器都不起作用： p:hover:after:after ， p:after:hover

可以在选择器中链接在一起的简单选择器的数量没有限制。 正如@BoltClock在注释中所述，只能有一个类型选择器或通用选择器。

CSS3选择器 - 4.选择器语法 （参考）

一系列简单的选择器是一系列简单的选择器，它们没有被组合器分开。 它始终以类型选择器或通用选择器开头 。

这是一个相关的长选择器：（ 例子）

#parent:first-of-type:first-child > .child:last-child p:not(#element):not(#otherelement):hover:after

Answer 2

允许多个动态伪类 。

组合动态伪类的示例：

 a:focus { background: yellow } a:focus:hover { background: white } 

最后一个选择器匹配伪类中的A元素：focus和伪类：hover。

插图： http ： //jsfiddle.net/BhKuf/ （记得要悬停）