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

同じ要素に対する複数の :before 擬似要素

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

次のシナリオを考えてみましょう:

<p>Is it possible to have multiple :before pseudos for the same element?</p>

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

<p>I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.</p>

CSS2.1 では、要素は常に、各タイプの疑似要素を 1 つだけ所有できます。したがって、複数の :before ルールが同じ要素をターゲットにしている場合、それらはカスケードして単一の :before 疑似要素を形成します。示されている例では、結果は次のようになります。

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

最後に宣言されたコンテンツ宣言が優先され、他の宣言は破棄されます。この動作は、通常の CSS プロパティの動作と似ています。

コンテンツが異なる複数の疑似要素を要素に適用するには、セレクターを組み合わせて追加の CSS ルールを作成します。たとえば、 .circle.now:before または .now.circle:before を使用して要素をターゲットにし、各疑似要素に必要なコンテンツを指定できます。

レガシー CSS 仕様では、複数の を挿入するための構文が提案されています。 CSS2.1 互換カスケードを使用した :before および ::after 擬似要素。ただし、この機能はまだ実装されていないため、将来の仕様に含まれる可能性は低いです。

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