CSSの優先順位について

Question

  <ul>
    <li>abc
      <ul id="subMenu">
        <li><a href="" class="nowPage">a1</a></li>
        <li><a href="">b1</a></li>
        <li><a href="">c1</a></li>
      </ul>
    </li>
    <li>def</li>
    <li>ghi</li>
  </ul>

    #subMenu li a {color: red;}  /*X*/
    #subMenu li:first-of-type a {color: blue;}  /*Y*/
    .nowPage {color: orange;}  /*Z*/

質問１
Zをコメントアウトし、XとYだけを反映させると、XとYの並び順にかかわらず、a1の文字色は常に青色でした。なぜですか？

質問2
Yをコメントアウトし、XとZだけを反映させると、XとZの並び順にかかわらず、a1の文字色は常に赤色でした。なぜですか？　また、CSSは外部から読み込み（条件１）、かつ、Yのような擬似クラスを使わない（条件２）で、a1をオレンジにするにはどうすればいいですか？

質問3
いずれもコメントアウトせずに、XとYとZをすべて反映させると、XとYとZの並び順にかかわらず、a1の文字色は常に青色でした。なぜですか？

以上3点をよろしくお願いします。

Answer 1

これは、詳細度と呼ばれるルールで決まっています。

1. ID指定が多いほうが優先
2. クラスや疑似クラスの多いほうが優先
3. タグ指定の多いほうが優先

XとZではXだけIDがあるのでXが優先、XとYでは疑似クラスの多いYが優先です。