複数の :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 サイトの他の関連記事を参照してください。