1 つの要素に複数の :before 疑似要素を含めることはできますか?

複数の :before 擬似要素

要素は複数の :before 擬似要素を持つことができますか?この疑問は、jQuery を使用して同じ要素にスタイルを適用するときに発生します。最新のスタイルのみが有効になるようです。

CSS2.1 の制限

CSS2.1 では、要素は、特定のタイプの疑似要素を一度に 1 つだけ持つことができます。したがって、要素には :before と :after の両方の疑似要素を含めることができますが、それぞれ 1 つだけしか含めることはできません。

カスケード動作

複数の :before ルール同じ要素がカスケードされ、単一の :before 疑似要素に適用されます。最も優先順位の高いルール (通常は最後のルール) が優先されます。提供された例では:

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

最後のルール「Now」のコンテンツ宣言のみが適用されます。通常の要素プロパティと同様に、残りの宣言は破棄されます。

セレクターの結合

複数のセレクターが同じ要素に一致し、そのすべてのスタイルを適用したい場合は、追加のセレクターを生成します。セレクターを組み合わせた CSS ルール。指定された例では、これは .circle.now:before または .now.circle:before になります。

レガシー CSS3 コンテンツ仕様

非推奨の css3-content仕様では、CSS2.1 カスケードと互換性のある複数の ::before および ::after 疑似要素を挿入する表記法が提案されています。ただし、この機能は廃止されており、どのブラウザにも実装されていません。

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