多個：一個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/ （記得要懸停）