Jaka jest różnica między „>” a spacją w selektorach CSS?

126

Jaki jest sens używania tej składni

div.card > div.name

Jaka jest różnica między tym

div.card div.name
css css-selectors Randy Mayer
źródło
W związku z tym pytaniem, ponieważ nie byłem tego świadomy i mógłbym zostać użyty do rozwiązania problemu, który mam, które przeglądarki obsługują ten typ selektora?
Kyle,
3
Jest obsługiwany we wszystkich obecnych przeglądarkach. IE otrzymał wsparcie w wersji 7: msdn.microsoft.com/en-us/library/…
Matti Virkkunen

Odpowiedzi:

210

A > B wybierze tylko B, które są bezpośrednimi potomkami A (to znaczy nie ma między nimi żadnych innych elementów).

A B wybierze dowolne B znajdujące się wewnątrz A, nawet jeśli między nimi są inne elementy.

Matti Virkkunen
źródło
11

>jest selektorem podrzędnym. Określa tylko bezpośrednie elementy podrzędne, a nie żadnych elementów podrzędnych (w tym wnuki, wnuki itp.), Jak w drugim przykładzie bez rozszerzenia >.

Selektor dziecka nie jest obsługiwany przez IE 6 i starsze. Świetna tabela kompatybilności jest tutaj .

Pekka
źródło
2

div.card > div.namepasuje, <div class='card'>....<div class='name'>xxx</div>...</div> ale nie pasuje<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name pasuje do obu.

Oznacza to, że >selektor zapewnia, że ​​wybrany element po prawej stronie >jest natychmiastowym dzieckiem elementu po jego lewej stronie.

Składnia bez >dopasowań, <div class='name'>która jest potomkiem (nie tylko dzieckiem) <div class='card'>.

René Nyffenegger
źródło
0

A> B wybiera B, jeśli jest to bezpośrednie dziecko A, podczas gdy AB wybiera B, czy jest to bezpośrednie dziecko B, czy nie.

<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>
Rozwiń fragment

eozten
źródło
Tutaj znajduje się fragment kodu. Nie wiem, czy to widzisz.
eozten
Demo jest fajne, ale tak naprawdę tylko pomocniczy w stosunku do informacji, które odpowiadają na pytanie; informacje, które znajdują się już w pozostałych trzech odpowiedziach. Może gdyby to pytanie zostało zadane dzisiaj, byłoby to przydatne, ale jeśli masz zamiar nekroć pytanie od> 8 lat, powinno być naprawdę z nieodpartego powodu.
TylerH
0

> vs Space

Rozważ dwa scenariusze div > span { }vs.div span { }

Tutaj <space>wybiera wszystkie <span>elementy <div>elementu, nawet jeśli znajdują się one wewnątrz innego elementu. > Wybiera wszystkie elementy podrzędne <div>elementu, ale jeśli znajdują się one wewnątrz innego elementu.

> (Większe niż):

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

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

    <span>World!</span>
  </div>
</body>
Rozwiń fragment

Ten po prostu wybiera tag <span>World!</span>i nie będzie szukał <span>wewnętrznego <p>tagu.

Przestrzeń

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

    <span>World!</span>
  </div>
<body>
Rozwiń fragment

Ten wybiera wszystkie tagi span, nawet jeśli są zagnieżdżone w innym tagu.

S.Goswami
źródło