複数の :before 擬似要素を同じ要素に適用できますか?

同じ要素に対して複数の :before 疑似要素が存在できますか?

質問:

同じ要素に複数の:before擬似要素を適用することは可能でしょうか？例:

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

答え:

いいえ、CSS2.1 では、要素は常に、任意の種類の疑似要素を 1 つだけ持つことができると規定されています。 。これは、要素は :before と :after 疑似要素の両方を持つことができますが、各タイプを複数持つことはできないことを意味します。

その結果、複数の :before ルールが同じ要素をターゲットにすると、それらは単一の :before 擬似要素にカスケードされます。たとえば、上記のコードは次のように折りたたまれます。

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

最も優先順位が高い最後のコンテンツ宣言のみが有効になります。

回避策:

複数の :before 擬似要素を同じ要素に適用する場合は、組み合わせたセレクターを使用して、ブラウザーが何を行うべきかを正確に指定できます。例:

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

これにより、コンテンツとスタイルが異なる 2 つの :before 疑似要素が作成されます。

以上が複数の :before 擬似要素を同じ要素に適用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。