html - 一个CSS元素上有多个：选择器？

Question

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

例如：

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 }

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

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