CSSにおける子孫セレクタの優先順位

これまでのすべてのレッスンでは、すべてのセレクタは要素自体を対象とする必要がありました。あるセレクタは要素を対象とし、別のセレクタはその要素の親を対象とする場合があります。

親に例えば色が指定されている場合、その色は子孫に継承されることは既にご存知でしょう。しかし、子孫にも色が指定されている場合、子孫のセレクタは親のセレクタよりも高い優先順位を持ちます。

これは、子孫のタグセレクタが親のクラスを上回ることを意味します：

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

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

Результат:

子孫のタグセレクタは、親のIDも上回ります：

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

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

Результат: