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

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

div.card > div.name

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

div.card div.name
Источник

4 ответа

Решение

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

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

Источник

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

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

Источник

> против космоса

Рассмотрим два сценария div > span { } vs. div span { }

Здесь (пробел) выделяет все <span> элементы внутри <div>элемент, даже если они вложены более чем в один элемент. В> выбирает всех потомков <div> элемент, но если они не находятся внутри другого элемента.

Взгляните на два примера:

> (Больше чем):

div > span {
  color: #FFBA00 ;
}
<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

    <span>World!</span>
  </div>
</body>

Этот просто выбирает <span>Hello...</span> (потому что сразу после вложенного div тег), и <span>World!</span> и он не будет искать <span> внутри <p> тег, потому что он не сразу после div тег.

Космос

div span {
  color: #0A0 ;
}
<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

    <span>World!</span>
  </div>
</body>

Он выбирает все теги span, даже если они вложены в другие теги.

Источник

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

Источник

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>

Источник
Другие вопросы по тегам