6

:beforeユーザーを特徴付ける記号でユーザープロファイルへのリンクにタグを付けるために使用しています。例としては、「管理者」、「非アクティブなユーザー」、「初心者」などがあります。

問題は、複数の申請が可能であるということです。

では、リンク上の複数のクラスがで:before疑似要素を定義するとどうなりcontentますか？最も具体的なセレクターは最初のセレクターをオーバーライドしますか？それとも両方とも順番に表示されますか？何が起こっても、それは信頼できる行動ですか？

4

1 に答える 1

5

最も具体的なセレクターが優先されます。これはCSS2.1で言及されています：

疑似要素は、以下および他の場所で説明されている例外を除いて、CSSの実際の要素と同じように動作します。

実際のブラウザの動作に関しては、私が知る限り、この動作は、のような置換された要素とは異なり、CSS2.1がそれらの疑似要素の動作を定義するのような置換されていない要素:beforeをサポートするすべてのブラウザで信頼できます。これは理にかなっています。なぜなら、そのような疑似要素が複数生成された場合、ブラウザはそれらをフォーマット構造にどのように配置すべきかわからないからです。:afteraimg

次の例では、特異性とカスケードによってa.inactive:beforeが優先さ: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>

于 2013-01-01T16:03:49.280 に答える