Was ist der Unterschied zwischen '>' und einem Leerzeichen in CSS-Selektoren?

126

Was bringt es, diese Syntax zu verwenden?

div.card > div.name

Was ist der Unterschied zwischen diesen

div.card div.name
css css-selectors Randy Mayer
quelle
Welche Browser unterstützen diese Art von Selektor, da ich mir dessen nicht bewusst war und zur Lösung eines Problems verwendet werden konnte?
Kyle
3
Es wird in allen aktuellen Browsern unterstützt. IE erhielt Unterstützung in Version 7: msdn.microsoft.com/en-us/library/…
Matti Virkkunen

Antworten:

210

A > B wählt nur B aus, die A direkt untergeordnet sind (dh es gibt keine anderen Elemente dazwischen).

A B wählt jedes B aus, das sich in A befindet, auch wenn sich andere Elemente zwischen ihnen befinden.

Matti Virkkunen
quelle
11

>ist der untergeordnete Selektor. Es werden nur unmittelbare untergeordnete Elemente und keine Nachkommen (einschließlich Enkelkinder, Enkelkinder usw.) wie im zweiten Beispiel ohne das angegeben >.

Die untergeordnete Auswahl wird von IE 6 und niedriger nicht unterstützt. Eine großartige Kompatibilitätstabelle finden Sie hier .

Pekka
quelle
2

div.card > div.namepasst, <div class='card'>....<div class='name'>xxx</div>...</div> aber es passt nicht<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name passt zu beiden.

Das heißt, der >Selektor stellt sicher, dass das ausgewählte Element auf der rechten Seite des >Elements ein unmittelbares untergeordnetes Element des Elements auf der linken Seite ist.

Die Syntax ohne die >entspricht einer <div class='name'>, die ein Nachkomme (nicht nur ein Kind) von ist <div class='card'>.

René Nyffenegger
quelle
0

A> B wählt B aus, wenn es sich um direkte Kinder von A handelt, während AB B auswählt, ob es sich um direkte Kinder von B handelt oder nicht.

<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>
Erweitern Sie das Snippet

eozten
quelle
Hier gibt es einen Code-Ausschnitt. Ich weiß nicht, ob Sie es sehen können.
Eozten
Die Demo ist nett, aber wirklich nur eine Ergänzung zu den Informationen, die die Frage beantworten. Informationen, die bereits in den anderen drei Antworten enthalten sind. Wenn diese Frage heute gestellt würde, wäre das vielleicht nützlich, aber wenn Sie eine> 8 Jahre alte Frage nekrotisieren, sollte dies wirklich einen zwingenden Grund haben.
TylerH
0

> vs Space

Betrachten Sie die beiden Szenarien div > span { }vs.div span { }

Hier <space>wählt das alle <span>Elemente des <div>Elements aus, auch wenn sie sich in einem anderen Element befinden. Das> wählt alle untergeordneten <div>Elemente des Elements aus, aber wenn sie sich in einem anderen Element befinden.

> (Größer als):

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

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

    <span>World!</span>
  </div>
</body>
Erweitern Sie das Snippet

Dieser wählt nur die aus <span>World!</span>und sucht nicht nach der<span> Inside- <p>Tag.

Raum

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

    <span>World!</span>
  </div>
<body>
Erweitern Sie das Snippet

Dieser wählt alle Span-Tags aus, auch wenn sie in einem anderen Tag verschachtelt sind.

S. Goswami
quelle