Sont des “div > p” & “div p” même?
Hey, j'ai une question évidente.
Pour le code comme:
<div>
<p>We want to format this text :)</p>
</div>
Certaines personnes utilisent le sélecteur comme:
div > p {
something
}
Et autres:
div p {
something
}
Quelle est la différence dans ce cas? À mon avis - aucun?
Et en passant, n'est pas le descendant de l'élément de toujours un enfant?! Quelle est la différence entre les deux? Je suis en train de lire w3.org mais ne peut pas le faire 🙂
Merci!
Ce n'est pas un sélecteur de CSS3. C'est un CSS2 sélecteur.
OriginalL'auteur fomicz | 2010-10-16
Vous devez vous connecter pour publier un commentaire.
Simple:
affecte uniquement enfants directs.
affecte petits-enfants, grandgrandchildren etc. . (Ne pas faire une différence dans votre exemple)
Le sélecteur d'enfant n'est pas pris en charge par IE6.
pas de. Le
+
sélecteur sélectionne les frère suivantO. o n'est pas valide d'un sélecteur.
de toute évidence, vous n'avez aucune idée de quoi vous parlez. CSS4 soutiendra Manga sélecteurs: par exemple,
<3
pour les éléments HTML mignon, et^_^
pour drôle contenu.Elle correspond à une image d'une licorne avec l'ID
stackoverflow
dans un paragraphe en italique.OriginalL'auteur Pekka 웃
Pekka a expliqué, en théorie, dans sa réponse. Basé sur sa réponse, et ma réponse à une autre question sur le
>
combinator, je vais vous donner une illustration, modifié pour répondre à cette question.Considérer le bloc suivant du code HTML, et votre exemple sélecteurs CSS. - Je utiliser un exemple plus élaboré je peux donc vous montrer la différence entre les deux sélecteurs:
Qui
<p>
s sont sélectionnés par lequel les sélecteurs?Tout d'abord, tous match
div p
parce qu'ils sont<p>
les éléments situés à n'importe où dans un<div>
élément.Qui fait
div > p
plus spécifiques, ce qui pose la question suivante:Qui
<p>
s sont sélectionnés pardiv > p
?Sélectionné
Ce paragraphe
<p>
est un enfant ou un descendant direct, de la ultrapériphériques<div>
. Cela signifie qu'il n'est pas immédiatement contenues par tout autre élément qu'un<div>
. La hiérarchie est aussi simple que le sélecteur décrit, et comme telle, elle est sélectionnée pardiv > p
.Pas sélectionné
Ce
<p>
est trouvé dans une<blockquote>
élément, et le<blockquote>
élément se trouve dans le ultrapériphériques<div>
. La hiérarchie ressemblerait donc à ceci:Que le paragraphe est directement contenue par une blockquote, c'est pas sélectionné par
div > p
. Cependant, il peut matchblockquote > p
(en d'autres termes, c'est un enfant de la<blockquote>
).Sélectionné
Ce paragraphe vit à l'intérieur
<div>
, qui est contenue par l'extérieur<div>
. La hiérarchie devrait ressembler à ceci:Il n'a pas d'importance si il y a plus de
<div>
s imbriquées les unes dans les autres, ou même si le<div>
s sont contenus par d'autres éléments. Tant que ce point est directement contenue par ses propres<div>
, il sera sélectionné pardiv > p
.Vidas: Bien, l'OP a demandé de la différence 😛
+1 cette réponse se qualifie pour le
:o
sélecteur (étonnamment explication détaillée)Haha! Ce n'est pas mon seul 🙂
Encore une excellente réponse en 2015. +1 =)
OriginalL'auteur BoltClock