css - ネストされた要素を選択するための2つの異なるCSS構文に関する混乱

Question

重複の可能性：
CSSルールで「>」はどういう意味ですか？

CSSには、同じことをしているように見える次の2つの構文があります。ネストされた要素を選択します。

div span

div > span

私は何かが足りないのですか、それともこれら2つの実際に同等のセレクターですか？

Answer 1

いいえ、同等ではありません。最初のものは子孫セレクターであり、2番目は子セレクターです。

簡単な例：

<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>

このマークアップ.a > .cでは何も選択されませんが、.a .cと.a > .b > .cは最も内側の要素を選択します。

Answer 2

div span

任意のdiv内にある任意のスパンを選択します。これは、複数のレベルの深さである可能性があります。

div > span

divの直接の子孫であるスパンのみを選択します。子セレクターの詳細-> http://meyerweb.com/eric/articles/webrev/200006b.html