Qual è la differenza tra '>' e uno spazio nei selettori CSS?

127

Qual è il punto usando questa sintassi

div.card > div.name

Qual è la differenza tra questo

div.card div.name

css css-selectors

— Randy Mayer
fonte

Oltre a questa domanda, poiché non ne ero a conoscenza e potevo essere usato per risolvere un problema che sto riscontrando, quali browser supportano questo tipo di selettore?

— Kyle

3

È supportato in tutti i browser attuali. IE ha ottenuto il supporto nella versione 7: msdn.microsoft.com/en-us/library/…

— Matti Virkkunen

212

A > B selezionerà solo B che sono figli diretti di A (ovvero, non ci sono altri elementi tra di loro).

A B selezionerà qualsiasi B che si trova all'interno di A, anche se ci sono altri elementi tra di loro.

— Matti Virkkunen
fonte

11

>è il selettore figlio. Specifica solo elementi figlio immediati e non discendenti (inclusi nipoti, nipoti ecc.) Come nel secondo esempio senza il >.

Il selettore figlio non è supportato da IE 6 e versioni precedenti. Una grande tabella di compatibilità è qui .

— Pekka
fonte

2

div.card > div.namecorrisponde <div class='card'>....<div class='name'>xxx</div>...</div> ma non corrisponde<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name corrisponde ad entrambi.

Cioè, il >selettore si assicura che l'elemento selezionato sul lato destro di >sia un figlio immidiato dell'elemento sul lato sinistro.

La sintassi senza le >corrispondenze <div class='name'>è quella che è un discendente (non solo un figlio) di <div class='card'>.

— René Nyffenegger
fonte

0

A> B seleziona B se è figlio diretto di A, mentre AB seleziona B se figlio diretto di B o meno.

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

Espandi frammento

— eozten
fonte

C'è uno snippet di codice qui. Non so se riesci a vederlo.

— eozten,

La demo è carina ma in realtà è solo accessoria alle informazioni che rispondono alla domanda; informazioni che sono già nelle altre tre risposte. Forse se questa domanda fosse posta oggi, sarebbe utile, ma se hai intenzione di necro una domanda di 8 anni, dovrebbe davvero essere per un motivo convincente.

— TylerH,

0

> vs Space

Considera i due scenari div > span { }vs.div span { }

Qui, <space>seleziona tutti gli <span>elementi <div>dell'elemento anche se si trovano all'interno di un altro elemento. Il> seleziona tutti i figli di<div> dell'elemento ma se si trovano all'interno di un altro elemento.

> (Maggiore di):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

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

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

Espandi frammento

Questo seleziona solo <span>World!</span>e non cercherà l' <span>interno<p> tag .

Spazio

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

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

Espandi frammento

Questo seleziona tutti i tag span, anche se sono nidificati all'interno di un altro tag.

— S.Goswami
fonte