Question

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

例如：

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

因为，当我希望p悬停时，我希望同时调用:after选择器。

Answer 1

该具体示例完全有效，它的作用为demonstrated here。

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

CSS3选择器 - 7.伪元素 (reference)

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

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

可以在选择器中链接在一起的简单选择器的数量没有限制。而在评论中，@BoltClock states只能有一个类型选择器或通用选择器。

CSS3选择器 - 4.选择器语法 (reference)

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

以下是一个相关长的选择器：(example)

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

Answer 2

允许多个dynamic pseudo-classes。

组合动态伪类的示例：
a:focus { background: yellow } 
a:focus:hover { background: white }
最后一个选择器匹配伪类中的A元素：focus 并且在伪类中：悬停。

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

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

2 个答案: