Maison > interface Web > tutoriel CSS > Utilisez le sélecteur de pseudo-classe :first-of-type pour sélectionner le style du premier élément du même type

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

PHPz
Libérer: 2023-11-20 14:18:32
original
784 Les gens l'ont consulté

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>标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2>标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>
Copier après la connexion

Code CSS :

p:first-of-type {
  font-weight: bold;
}
Copier après la connexion

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;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal