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

複数の :before 疑似要素は同じ要素を強化できますか?

はじめに:
CSS を使用する際に、次のような一般的な疑問が生じます。複数の :before 擬似要素を 1 つの要素に適用できますか?答えを理解するために、疑似要素の概念を詳しく調べて、疑似要素がカスケードとどのように相互作用するかを調べてみましょう。

CSS 疑似要素とカスケード:
CSS2.1 、要素は、:before または :after など、特定のタイプの擬似要素を一度に 1 つだけ所有できます。これは、要素が両方のインスタンスを持つことができますが、同じ型のインスタンスを複数持つことはできないことを意味します。

jQuery を使用した例:
指定されたコードで例示されているように、複数の :before 擬似を適用しようとしています。 -jQuery を使用して 1 つの要素に要素を追加すると、最後の要素のみが取得されます効果:

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

カスケード動作:
複数の :before ルールが同じ要素に適用される場合、優先順位の高いルール (最後のルール) がカスケード ルールに従います。 ) 他のものをオーバーライドします。これにより、次のように、最後のルールのみからの宣言を含む単一の :before 擬似要素が作成されます。

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

制限の克服:
If multiple :before同じ要素に対して複数の宣言が必要な場合は、セレクターを組み合わせて追加の CSS ルールを作成する必要があります。これにより、クラスのさまざまな組み合わせに対して望ましい動作を指定できます:

.circle.now:before { /* Specific rule for .circle with .now */ }
.now.circle:before { /* Specific rule for .now with .circle */ }

従来の CSS と今後の開発:
非推奨の css3 コンテンツ仕様では、 CSS2.1 カスケードと互換性のある表記法。ただし、この機能は実装されることはありませんでした。現在、css-content-3 および css-pseudo-4 のドラフトでは、関心が低いため、この機能が省略されています。

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