Dupliquer possible:
Que signifie ">" dans les règles CSS?
J'ai vu le "plus grand que" (>) utilisé dans le code CSS à quelques reprises, mais je ne peux pas savoir ce qu'il fait. Qu'est ce que ça fait?
Dupliquer possible:
Que signifie ">" dans les règles CSS?
J'ai vu le "plus grand que" (>) utilisé dans le code CSS à quelques reprises, mais je ne peux pas savoir ce qu'il fait. Qu'est ce que ça fait?
> sélectionne les enfants immédiatsPar exemple, si vous avez des div imbriquées comme ceci:
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
et vous déclarez une règle CSS dans votre feuille de style comme suit:
.outer > div {
...
}
vos règles ne s'appliqueront qu'aux divs qui ont une classe de "middle" puisque ces divs sont des descendants directs (enfants immédiats) d'éléments de classe "outer" (à moins, bien sûr, que vous déclariez d'autres règles plus spécifiques remplaçant ces règles) . Voir le violon
div {
border: 1px solid black;
padding: 10px;
}
.outer > div {
border: 1px solid orange;
}<div class='outer'>
div.outer - This is the parent.
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
</div>
<p>Without Words</p>
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>Si au contraire, vous aviez un espace entre sélecteurs au lieu de >, vos règles s'appliqueraient aux deux divs imbriqués. L'espace est beaucoup plus communément utilisé et définit un "sélecteur descendant", ce qui signifie qu'il cherche tout élément correspondant dans l'arbre plutôt que des enfants immédiats comme le > Est-ce que.
Noter la > le sélecteur n'est pas supporté par IE6. Cela fonctionne dans tous les autres navigateurs actuels, y compris IE7 et IE8.
Si vous recherchez des sélecteurs CSS moins bien utilisés, vous pouvez également +, ~, et [attr] des sélecteurs, qui peuvent tous être très utiles.
Cette page a une liste complète de tous les sélecteurs disponibles, ainsi que les détails de leur support dans divers navigateurs (c'est principalement IE qui a des problèmes), et de bons exemples de leur utilisation.
> sélectionne tout descendants directs / enfantsUn espace sélecteur sélectionnera tous les descendants profonds alors qu'un plus grand que > Le sélecteur ne sélectionnera que tous les descendants immédiats. Voir violon par exemple.
div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */<div class="a">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
<div class="b">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>C'est le sélecteur d'enfant CSS. Exemple:
div > p sélectionne tous les paragraphes qui sont des enfants directs de div.
Voir ce
Comme d'autres l'ont dit, c'est un enfant direct, mais il vaut la peine de noter que c'est différent de simplement laisser un espace ... un espace est pour tout descendant.
<div>
<span>Some text</span>
</div>
div>span correspondrait à cela, mais il serait ne pas correspond à ceci:
<div>
<p><span>Some text</span></p>
</div>
Pour correspondre à cela, vous pourriez faire div>p>span ou div span.
C'est un sélecteur d'enfants.
Il correspond lorsqu'un élément est l'enfant d'un élément. Il est composé de deux ou plusieurs sélecteurs séparés par ">".
Exemples):
La règle suivante définit le style de tous les éléments P qui sont des enfants de BODY:
body > P { line-height: 1.3 }
Exemples):
L'exemple suivant combine des sélecteurs descendants et des sélecteurs enfants:
div ol>li p
Il correspond à un élément P qui est un descendant d'un LI; l'élément LI doit être l'enfant d'un élément OL; l'élément OL doit être un descendant d'un DIV. Notez que l'espace blanc optionnel autour du combinateur ">" a été omis.
Il déclare la référence parent, regardez cette page pour la définition:
Cela signifie parent / enfant
Exemple:
html> body
c'est dire que ce corps est un enfant de html
Check-out: Sélecteurs