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

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

div.card > div.name

в чем разница между этим

div.card div.name
98
css css-selectors css3

4 ответов

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

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

150

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

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

9

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

A > B выбирает 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>
-1