html - 1 つの CSS 要素に複数の :selector がありますか?

Question

:selectorsCSS 要素のスタイルを設定していますが、1 つの CSS 要素で複数を使用できるかどうか疑問に思っていました。

例えば：

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

pをホバーしたいときは、:afterセレクターも呼び出したいからです。

Answer 1

その特定の例は完全に有効で、ここに示されているように機能します。

現在のところ、疑似要素に関する主な制限は次のとおりです。

CSS3 セレクター - 7. 疑似要素 (リファレンス)

selector ごとに 1 つの疑似要素のみを表示できます。存在する場合は、セレクターのサブジェクトを表す一連の単純なセレクターの後に表示する必要があります。注: この仕様の将来のバージョンでは、セレクターごとに複数の疑似要素が許可される可能性があります。

したがって、次のセレクターはどちらも機能しません: p:hover:after:after,p:after:hover

セレクター内でチェーンできる単純なセレクターの数に制限はありません。また、コメントで@BoltClock が述べているように、タイプ セレクターまたはユニバーサル セレクターは 1 つしか存在できません。

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/ (ホバーすることを忘れないでください)