Question Que signifie le sélecteur CSS ">" (supérieur à la signature)?


Par exemple:

div > p.some_class {
  /* Some declarations */
}

Que fait exactement le > signe signifie?


411
2017-07-12 04:33


origine


Réponses:


> est le combinateur enfant, parfois appelée à tort le combinateur descendant direct.1

Cela signifie que le sélecteur div > p.some_class sélectionne uniquement les paragraphes de .some_class qui sont imbriqués directement à l'intérieur une divet pas les paragraphes qui sont imbriqués plus loin.

Une illustration:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Ce qui est sélectionné et ce qui ne l'est pas:

  1. Choisi
    Ce p.some_class est situé directement à l'intérieur du div, donc une relation parent-enfant est établie entre les deux éléments.

  2. Non séléctionné
    Ce p.some_class est contenu par un blockquote dans le div, plûtot que le div lui-même. Bien que cela p.some_class est un descendant de la divce n'est pas un enfant; c'est un petit-enfant.

    Par conséquent, alors que div > p.some_class ne correspondra pas à cet élément, div p.some_class sera, en utilisant le combinateur descendant au lieu.


1  Beaucoup de gens vont plus loin pour l'appeler «enfant direct» ou «enfant immédiat», mais c'est totalement inutile (et incroyablement ennuyeux pour moi), car un élément enfant est immédiat par définition De toute façon, ils veulent dire exactement la même chose. Il n'y a pas d'enfant indirect.


594
2017-07-12 04:35



> (signe supérieur à) est un combinateur CSS.

Un combinateur est quelque chose qui explique la relation entre les sélecteurs.

Un sélecteur CSS peut contenir plusieurs sélecteurs simples. Entre les sélecteurs simples, on peut inclure un combinateur.

Il existe quatre combinateurs différents en CSS3:

  1. sélecteur descendant (espace)
  2. sélecteur d'enfant (>)
  3. sélecteur de frère adjacent (+)
  4. sélecteur de frères et sœurs (~)

Remarque:  < n'est pas valide dans les sélecteurs CSS.

enter image description here

Par exemple: 

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Sortie: 

enter image description here

Plus d'informations sur les combinateurs CSS


22
2018-02-13 00:49



Comme d'autres le mentionnent, c'est un sélecteur d'enfants. Voici le lien approprié.

http://www.w3.org/TR/CSS2/selector.html#child-selectors 


9
2017-07-12 04:37



Ça correspond p éléments avec classe some_class qui sont directement sous un div.


6
2017-07-12 04:35



Tout p tags avec classe some_class qui sont les enfants directs d'un div marque.


2
2017-07-12 04:34



html
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
css
div > p.some_class{
    color:red;
}

Tous les enfants directs qui sont <p> avec .some_class obtiendrait le style appliqué à eux.


1
2017-12-19 15:15



(sélecteur d'enfant) a été introduit dans css2.   div p {} sélectionne tous les éléments p decedent des éléments div, alors que div> p ne sélectionne que les éléments p enfants, pas grand enfant, arrière grand-enfant etc.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Pour plus d'informations sur les lecteurs CSS et leur utilisation, consultez mon blog, sélecteurs css et sélecteurs css3


0
2018-01-14 17:01