css - CSS3: 子のスタイリングの違い

Question

私の質問のタイトルが私が尋ねようとしていることを正確に表しているかどうかはわかりませんが、これは私が CSS3 に触れるのはほぼ初めてであり、実践的な経験を得るために人々が行ったさまざまなプロジェクトを調査してきました。

これらのプロジェクトを検索していると、理解に苦しむものに出くわします。次の2行の違いは正確には何ですか:

#random_ID > ul > li > a { ... }

#random_ID ul li a { ... }

これらは同じことを書く2つの方法ですか？どんな助けでも大歓迎です！

score 3 · Accepted Answer

大なり記号は、ルックアップを第 1 レベルの子孫 (左側のセレクターの子) のみに制限します。シンボルがなければ、どのレベルのどの子孫でもかまいません。

最初の例は「random_ID with a child ul with a child li with a child a」であり、2 番目の例は「任意の子孫 ul を持つ任意の子孫 ul を持つ任意の子孫 li を持つ任意の子孫 a」です。

score 1 · Accepted Answer

>「直系の子」という意味です。これは、要素 ( の右側にあるもの>) が親 ( の左側にあるもの>)の直接の子である場合にのみ、スタイルを設定します。

次のレイアウトがあるとします。

<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

div > li { background: red; }liは直接の子ではないため、動作しませんdiv > ul > li>が、div li動作します。

すべてのブラウザーが直接の子タグをサポートしているわけではないことに注意してください。特に古いバージョンの Internet Explorer では、直接の子タグに依存しないでください。使用する場合はフォールバックを用意してください。

2 に答える 2