CSS セレクターの優先順位と特異性の詳細については、こちらをご覧ください。

Question

プロパティの競合時に CSS セレクターがどのように機能するかを理解したいと思っています。ある属性が別の属性よりもどのように選択されるのでしょうか?

div {
  背景色: 赤;
}

div.my_class {
  背景色: 黒;
}

div#my_id {
  背景色: 青;
}

ボディディビジョン{
  背景色: 緑;
}

ボディ>div {
  背景色: オレンジ;
}

本文>div#my_id {
  背景色: ピンク;
}

<div id="my_id" class="my_class">こんにちは</div>

セレクターの優先順位はどのように機能しますか?

Answer 1

順番に、1 が最も低い特異性、5 が最も高い特異性です。 https://youtu.be/NqDb9GfMXuo詳細はデモンストレーション用に表示されます。

Answer 2

CSS 2.1 仕様自体と、ブラウザが具体性を計算する方法へのリンクをここに追加します。

CSS 2.1 セクション 6.4.3:

特異性が等しい場合、CSS 2.1 セクション 6.4.1 :

が使用されます。

これについては、スタイルを使用するときではなく、スタイルを定義するときに説明することに注意してください。クラス .a と .b の特異性が等しい場合、スタイルシートで最後に定義されたクラスが優先されます。 <p class="a b">...</p> および <p class="b a">...</p> は、 .aと.bの定義順に従って同じスタイルで設定します。