Utilisez le sélecteur de pseudo-classe :first-child pour sélectionner le style CSS du premier élément enfant

Utilisez le sélecteur de pseudo-classe :first-child pour sélectionner le style CSS du premier élément enfant

Le sélecteur de pseudo-classe en CSS est un outil puissant qui peut sélectionner et modifier des éléments spécifiques. Parmi eux, le sélecteur de pseudo-classe :first-child est un sélecteur couramment utilisé, qui peut sélectionner le premier élément enfant d'un élément, quel que soit le type ou la position de l'élément enfant. Dans cet article, nous détaillerons comment utiliser le sélecteur de pseudo-classe :first-child et fournirons quelques exemples de code concrets.

Tout d'abord, regardons un exemple simple de code HTML :

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

Dans cet exemple, nous avons une liste non ordonnée (ul) avec trois éléments de liste (li), qui sont des pommes, des bananes et des oranges. Supposons maintenant que nous souhaitions définir la couleur du texte du premier élément de la liste (c'est-à-dire Apple) sur rouge, nous pouvons utiliser le sélecteur de pseudo-classe :first-child pour obtenir cet effet.

Ce qui suit est un exemple de code CSS spécifique :

ul li:first-child {
  color: red;
}

Dans ce code, nous utilisons le sélecteur de pseudo-classe :first-child pour sélectionner le premier élément li sous l'élément ul. Ensuite, nous définissons la couleur du texte de l'élément sélectionné sur rouge.

Si nous appliquons ce code CSS à notre exemple, le résultat sera que la couleur de police du premier élément de la liste (pomme) passe au rouge, tandis que les deux autres éléments de la liste (banane et orange) conservent la couleur par défaut.

Voici également un exemple HTML plus complexe avec plusieurs éléments imbriqués :

<div class="container">
  <h1>Hello, world!</h1>
  <p>Welcome to my website.</p>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</div>

Si nous voulons sélectionner le premier élément de la liste et définir la couleur de son texte sur rouge, nous devons le modifier légèrement. Maintenant, nous devons sélectionner le premier élément enfant de l'élément ul à l'aide du sélecteur de pseudo-classe :first-child et définir la couleur de son texte sur rouge. Le code CSS spécifique est le suivant :

.container ul li:first-child {
  color: red;
}

Dans ce code, nous sélectionnons d'abord l'élément ul sous la classe .container, puis utilisons le sélecteur de pseudo-classe :first-child pour sélectionner le premier élément li de l'élément ul. Enfin, nous définissons la couleur du texte de l'élément sélectionné sur rouge.

Pour résumer, en utilisant le sélecteur de pseudo-classe :first-child, nous pouvons facilement sélectionner le premier élément enfant d'un élément et lui appliquer un style CSS spécifique. Qu'il s'agisse d'un élément simple ou d'une structure imbriquée complexe, ce sélecteur peut nous aider à obtenir l'effet souhaité. J'espère que les exemples de code fournis dans cet article vous seront utiles.

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!