143

:before同じ要素に対して複数の疑似を持つことは可能ですか？

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

jQueryを使用して上記のスタイルを同じ要素に適用しようとしていますが、最新のスタイルのみが適用され、両方が適用されることはありません。

4

4 に答える 4

115

CSS2.1 では、要素は、任意の種類の疑似要素を一度に最大 1 つしか持つことができません。(これは、要素が a:beforeと:after疑似要素の両方を持つことができることを意味します — それぞれの種類を複数持つことはできません。)

その結果、:before同じ要素に一致する複数のルールがある場合、それらはすべてカスケードされ、通常の要素と同様に単一の:before疑似要素に適用されます。あなたの例では、最終結果は次のようになります。

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

ご覧のcontentとおり、優先順位が最も高い宣言 (前述のように、最後に来る宣言) のみが有効になります。残りの宣言は、他の CSS プロパティの場合と同様に破棄されます。

この動作は、CSS2.1 のセレクター セクションで説明されています。

疑似要素は、CSS の実際の要素と同じように動作しますが、以下で説明する例外があります。

これは、疑似要素を持つセレクターが通常の要素のセレクターと同じように機能することを意味します。また、カスケードが同じように機能する必要があることも意味します。奇妙なことに、CSS2.1 が唯一のリファレンスのようです。css3 -selectorsもcss3-cascadeもこれについてまったく言及しておらず、将来の仕様で明確になるかどうかはまだ不明です。

要素が同じ疑似要素を持つ複数のセレクターに一致する可能性があり、それらすべてを何らかの形で適用したい場合は、ブラウザーがそれらの中で何をすべきかを正確に指定できるように、組み合わせたセレクターで追加の CSS ルールを作成する必要があります。ケース。contentたとえば、シンボルとテキストのどちらを先に置くべきかが明確でないため、ここでプロパティを含む完全な例を提供することはできません。ただし、この結合されたルールに必要なセレクターは、.circle.now:beforeまたはの.now.circle:beforeいずれかです。どちらのセレクターも同等であるため、選択するセレクターは個人的な好みであり、content自分で定義する必要があるのはプロパティの値のみです。

それでも具体的な例が必要な場合は、この同様の質問に対する私の回答を参照してください。

従来の css3-content 仕様には、CSS2.1 カスケードと互換性のある表記法を使用して複数::beforeの::after疑似要素を挿入するセクションが含まれていますが、その特定のドキュメントは廃止されていることに注意してください — 2003 年以来更新されておらず、誰も持っていません過去 10 年間にその機能を実装しました。良いニュースは、放棄されたドキュメントがcss-content-3とcss-pseudo-4を装って積極的に書き直されていることです。悪いニュースは、複数の疑似要素機能がどちらの仕様にも見当たらないことです。おそらく、実装者の関心が欠如しているためです。

于 2012-08-17T02:57:43.643 に答える