web-dev-qa-db-fra.com

Quelle est la différence entre '>' et un espace dans les sélecteurs CSS?

Quel est l'intérêt d'utiliser cette syntaxe

div.card > div.name

Quelle est la différence entre ça

div.card div.name
csscss3css-selectors
107
Randy Mayer

A > B sélectionnera uniquement B qui sont des enfants directs vers A (c'est-à-dire qu'il n'y a pas d'autres éléments entre les deux).

A B sélectionnera tout B qui se trouve à l'intérieur de A, même s'il y a d'autres éléments entre eux.

169
Matti Virkkunen

> est le sélecteur d'enfant. Il spécifie uniquement les éléments enfants immédiats et non aucun descendant (y compris les petits-enfants, petits-enfants, etc.) comme dans le deuxième exemple sans le >.

Le sélecteur d'enfant n'est pas pris en charge par IE 6 et inférieur. Un excellent tableau de compatibilité est ici .

10
Pekka 웃

div.card > div.name allumettes <div class='card'>....<div class='name'>xxx</div>...</div> mais cela ne correspond pas à <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name correspond aux deux.

C'est le > le sélecteur s'assure que l'élément sélectionné sur le côté droit du > est un enfant immidiate de l'élément sur son côté gauche.

La syntaxe sans le > correspond à n'importe quel <div class='name'> qui est un descendant (pas seulement un enfant) de <div class='card'>.

1
René Nyffenegger

A> B sélectionne B s'il s'agit d'un enfant direct de A, tandis que A B sélectionne B qu'il s'agisse d'un enfant direct de B ou non.

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