web-dev-qa-db-ja.com

「>」とCSSセレクターのスペースの違いは何ですか？

この構文を使用するポイントは何ですか

div.card > div.name

これの違いは何ですか

div.card div.name
csscss3css-selectors
107
Randy Mayer

A > Bは、Aの直接の子であるBのみを選択します（つまり、間に他の要素はありません）。

A Bは、Aの間に他の要素がある場合でも、Aの内側にあるBを選択します。

169
Matti Virkkunen

>は 子セレクターです。 直接の子要素のみを指定し、子孫（孫、孫などを含む）は指定しません>なしの2番目の例。

子セレクターはIE 6以前ではサポートされていません。優れた互換性テーブルは here です。

10
Pekka 웃

div.card > div.nameは<div class='card'>....<div class='name'>xxx</div>...</div>と一致しますが、<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>とは一致しません

div.card div.nameは両方に一致します。

つまり、>セレクターは、>の右側で選択された要素が左側の要素の子孫であることを確認します。

>のない構文は、<div class='name'>の子孫（子だけではない）である<div class='card'>に一致します。

1
René Nyffenegger

A> Bは、Aの直接の子である場合はBを選択し、A BはBの直接の子であるかどうかにかかわらずBを選択します。

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

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

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>
0
primalshade