Quel est le rôle de CSS :first-child ?

En CSS, le rôle du sélecteur :first-child est de faire correspondre le premier élément enfant dans son élément parent, avec la syntaxe "E:first-child{css code}" ; Cela ne fonctionne que lorsque deux conditions sont remplies, l'une est "le premier élément enfant" et l'autre est "cet élément enfant se trouve être E".

En CSS, le sélecteur :first-child correspond au premier élément enfant de son élément parent, si le premier élément de l'élément parent n'est pas celui qu'il cherche des éléments, ça ne marchera pas. (Tutoriel recommandé : Tutoriel vidéo CSS)

Ce sélecteur est facilement mal compris, et il y a généralement deux malentendus :

• Incompréhension 1 : C'est considéré que E:first-child sélectionne le premier élément enfant de l'élément E.

• Incompréhension 2 : On pense que E:first-child sélectionne le premier élément E de l'élément parent de l'élément E.

Les deux compréhensions ci-dessus sont fausses Afin de prouver que les deux compréhensions ci-dessus sont fausses, jetez un œil à l'exemple suivant

<!-- 误解一 -->
<style>
div:first-child{color: red;}
</style>

<div class="demo">
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</div>

L'effet est comme ceci. :

Évidemment, selon la première compréhension, seule la couleur de police du premier élément devrait devenir rouge, mais en fait, elles deviennent toutes rouges.

<!-- 误解二 -->
<style>
div a:first-child{color: red;}
</style>

<div class="demo">
<p>一个段落</p>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</div>

L'effet est le suivant :

Selon la deuxième compréhension, la police du premier élément du div devrait être rouge. a prouvé que cette compréhension est également fausse.

OK, la compréhension correcte devrait être : Tant que l'élément E est le premier élément enfant de son parent, sélectionnez . Il doit remplir deux conditions en même temps, l'une est "le premier élément enfant" et l'autre est "cet élément enfant se trouve être E".

Regardez l'exemple correct ci-dessous :

<style>
span:first-child{color: red;}
/*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/
p:first-child{color: blue;} 
i:first-child{color: orange;}
</style>

<div class="demo">
<div>.demo的第一个子元素是div</div>
<!--第一个span元素是它的父级P元素的第一个span，颜色变红色-->
<p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第一个i元素</i></p>
<!--第二个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第二个i元素</i></p>
<p>一个链接</p>
</div>

Effet :

Pour plus de connaissances sur la programmation, veuillez visiter : Programmation Commencez ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!