Utilisez le sélecteur de pseudo-classe :first-of-type pour sélectionner le style du premier élément du même type

Le sélecteur de pseudo-classe de premier type en CSS peut être utilisé pour sélectionner et styliser le premier élément du même type. Ce sélecteur peut être utilisé pour plusieurs éléments de balise, tels que p, div, span, etc.

Voici un exemple de code spécifique :

Code HTML :

<div class="container">
  <h1 id="标题">标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2 id="标题">标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>

Code CSS :

p:first-of-type {
  font-weight: bold;
}

Dans le code ci-dessus, nous avons sélectionné le premier élément de balise p et l'avons mis en gras. Le résultat sera affiché dans le navigateur et le premier paragraphe du texte sera mis en gras.

De même, nous pouvons également utiliser le sélecteur de premier type pour sélectionner le premier des autres éléments de balise. Par exemple :

h1:first-of-type {
  font-size: 24px;
}

Ici, nous sélectionnons le premier élément de balise h1 et définissons sa taille de police sur 24 pixels.

Il est à noter que l'utilisation du sélecteur de premier type ne peut sélectionner que le premier élément du même type. Si nous voulons sélectionner le premier élément parmi différents types d’éléments, nous pouvons utiliser :first-child.

En bref, l'utilisation du sélecteur de pseudo-classe de premier type peut très facilement définir un style spécifique pour le premier élément du même type.

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!