CSSにおける詳細度のルール

前の例では、両方のセレクタが同じで 同じ優先度を持っていました。これは、 下に書かれたプロパティが優先される ことを意味します。

また、1つのページ要素が複数のセレクタに 一致する状況もあります。 この場合、プロパティが競合すると、より詳細度が高い、 つまりより具体的なセレクタが優先されます。 詳細度のルールを見ていきましょう。

ルール 1

クラスは常にタグセレクタよりも優先されます:

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* この色が適用されます */
}

Результат:

ルール 2

IDは常にクラスよりも優先されます:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* この色が適用されます */
}

Результат:

ルール 3

同等の条件では、構成部分の数が多いセレクタが 優先されます。例えば、 2つのタグセレクタがある場合、 タグの数が多い方が優先されます:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* この色が適用されます */
}

Результат:

2つのクラスセレクタの場合、 指定されているクラスの数が多い方が優先されます （そこにタグセレクタが含まれていても影響しません）:

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* この色が適用されます */
}

Результат: