私は:beforeを使用してユーザープロファイルのリンクにタグを付け、ユーザーを特徴付ける記号を使用しています。例には「administrator」、「inactive user」、「newbie」などがあります。同じ要素の複数のクラスがa：before擬似要素を定義するとどうなりますか？
事は複数ある場合があります。
リンク上の複数のクラスがcontentの:before疑似要素を定義するとどうなりますか？最も特定のセレクタが最初のものをオーバーライドしていますか？あるいは、彼らは両方とも順番に出現しますか？何が起きても、信頼できる行動ですか？
最も特定のセレクタが優先されます。これはCSS2.1に記載されている：
擬似要素は、私の知る限り、単に実際のブラウザの挙動に関して以下に説明する例外とelsewhere.
とCSSの本当の要素のように、この動作を振る舞います:beforeと:afterのような置換えされていない要素がaのようにサポートされているすべてのブラウザでは、CSS2.1がimgのような置き換えられた要素とは異なり、その擬似要素の動作を定義します。このような擬似要素が複数生成された場合、ブラウザーはそれらを書式設定構造にどのようにレイアウトするべきか分からないため、これは理にかなっています。
以下の例では、特異性とカスケードによってa.inactive:beforeが優先され、このリンクの疑似要素には一致するコンテンツがあります（両方のセレクタが等しく特定であるため - タイプセレクタ、クラスセレクタおよび擬似要素）：要素は同じ擬似要素と、複数のセレクタを一致させることができます、あなたはそれらのすべてが何らかの形で適用する場合は
a.administrator:before {
content: '[Administrator] ';
}
a.inactive:before {
content: '[Inactive User] ';
}<a class="administrator inactive" href="profile.php?userid=123">Username</a>、あなたが作成する必要があります櫛付き追加CSSルールそのような場合にブラウザが何をすべきかを正確に指定できるようにします。上記の例を拡張：
a.administrator:before {
content: '[Administrator] ';
}
a.inactive:before {
content: '[Inactive User] ';
}
a.administrator.inactive:before {
content: '[Administrator] [Inactive User] ';
}<a class="administrator inactive" href="profile.php?userid=123">Username</a>ありがとうございます。私は、ほとんどの組み合わせを相互に排他的にし、残りのコンボの組み合わせルールを作成することで、私の問題を解決しました。 –
経験的に、最も固有のオーバーライド*以下*特定。しかし、私はそれを正しいものとして確認することはできません。しかし、それはCSSの一般的な特異性のルールと結びついているようです。 –
この質問は、私が数ヶ月前に回答した別のものの複製です。それを覚えていない私の言い訳？ [それはもともとは1ライナー（2センセーサー？）でした。]（http://stackoverflow.com/revisions/11999197/1）私はこの回答の情報のほとんどを以前のものにマージしました。 – BoltClock