Яка різниця між '>' та пробілом у селекторах 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

Демонстрація є приємною, але насправді просто допоміжною інформацією, яка відповідає на питання; інформація, яка вже є в інших трьох відповідях. Можливо, якби сьогодні було задано це запитання, це було б корисно, але якщо ви збираєтесь некротизувати запитання, пов'язані з віком 8 років, це справді повинно бути з вагомих причин.

— TylerH

0

> vs Космос

Розглянемо два сценарії div > span { }проти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
джерело