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

127

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

div.card > div.name

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

div.card div.name
css css-selectors Рэнди Майер
источник
В дополнение к этому вопросу, поскольку я не знал об этом и мог бы использоваться для решения возникшей у меня проблемы, какие браузеры поддерживают этот тип селектора?
Кайл
3
Поддерживается во всех текущих браузерах. IE получил поддержку в версии 7: msdn.microsoft.com/en-us/library/…
Матти Вирккунен,

Ответы:

212

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

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

Матти Вирккунен
источник
11

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

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

Пекка
источник
2

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

Рене Ниффенеггер
источник
0

A> B выбирает B, если он является прямым потомком A, тогда как AB выбирает 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>
Развернуть фрагмент

eozten
источник
Здесь есть фрагмент кода. Я не знаю, видите ли вы это.
eozten
Демо-версия хороша, но на самом деле просто вспомогательная к информации, которая отвечает на вопрос; информация, которая уже есть в трех других ответах. Может быть, если бы этот вопрос был задан сегодня, это было бы полезно, но если вы собираетесь некроить вопрос восьмилетней давности, это действительно должно быть по веской причине.
TylerH
0

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

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

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

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

div > span {
  color: #FFBA00 ;
}
<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>
Развернуть фрагмент

Этот просто выбирает <span>World!</span> и не заглядывает <span>внутрь<p> тег.

Космос

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

    <span>World!</span>
  </div>
<body>
Развернуть фрагмент

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

S.Goswami
источник