質問: ``` abc a1 b1 c1 def ghi ``` ``` #subMenu li a {color: red;} /*X*/ #subMenu li:first-of-type a {color: blue;} /*Y*/ .nowPage {color: orange;} /*Z*/ ``` 質問1 Zをコメントアウトし、XとYだけを反映させると、XとYの並び順にかかわらず、a1の文字色は常に青色でした。なぜですか? 質問2 Yをコメントアウトし、XとZだけを反映させると、XとZの並び順にかかわらず、a1の文字色は常に赤色でした。なぜですか? また、CSSは外部から読み込み(条件1)、かつ、Yのような擬似クラスを使わない(条件2)で、a1をオレンジにするにはどうすればいいですか? 質問3 いずれもコメントアウトせずに、XとYとZをすべて反映させると、XとYとZの並び順にかかわらず、a1の文字色は常に青色でした。なぜですか? 以上3点をよろしくお願いします。
回答: これは、**詳細度**と呼ばれるルールで決まっています。 1. ID指定が多いほうが優先 2. クラスや疑似クラスの多いほうが優先 3. タグ指定の多いほうが優先 XとZではXだけIDがあるのでXが優先、XとYでは疑似クラスの多いYが優先です。