В чем разница между '>' и пробелом в селекторах CSS?

Question

Какой смысл использовать этот синтаксис

div.card > div.name

Какая разница между этим

div.card div.name

Answer 1

A > B выберет только B, которые являются прямыми дочерними элементами для A (то есть между ними нет других элементов).

A B выберет любой B, который находится внутри A, даже если между ними есть другие элементы.

Answer 2

> - это дочерний селектор . Он указывает только непосредственные дочерние элементы, а не потомков (включая внуков, правнуков и т. Д.), Как во втором примере без >.

Дочерний селектор не поддерживается IE 6 и ниже. Великолепная таблица совместимости здесь .

Answer 3

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'>.

Answer 4

A> B выбирает B, если это прямые дочерние элементы A, тогда как 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>