Analyser les utilisations courantes et les exemples de pseudo-classes et pseudo-éléments CSS

Explorez en profondeur l'utilisation courante et l'analyse d'exemples des pseudo-classes et pseudo-éléments CSS

Dans le développement front-end, CSS est l'un de nos langages de conception de style couramment utilisés. En plus des sélecteurs et attributs de base, CSS fournit également des sélecteurs spéciaux appelés pseudo-classes et pseudo-éléments. Cet article approfondira l'utilisation courante et l'analyse d'exemples des pseudo-classes et pseudo-éléments CSS, et joindra des exemples de code spécifiques.

1. Utilisation courante et exemple d'analyse des pseudo-classes

1.  : pseudo-classe de survol

 : la pseudo-classe de survol est utilisée pour l'effet de survol de la souris et vous pouvez définir le style de survol de la souris sur l'élément. Par exemple, nous pouvons créer un simple effet dynamique de bouton. L'exemple de code est le suivant :

<style>
   .btn {
      padding: 10px 20px;
      background-color: #ccc;
      color: #fff;
   }
   .btn:hover {
      background-color: #f00;
   }
</style>
<button class="btn">悬停按钮</button>

Dans cet exemple, la couleur d'arrière-plan du bouton deviendra rouge au survol.

2. : pseudo-classe active

: la pseudo-classe active est utilisée pour définir les styles lorsque l'élément est activé (cliqué). Par exemple, nous pouvons créer un simple effet de clic sur un bouton. L'exemple de code est le suivant :

<style>
   .btn {
      padding: 10px 20px;
      background-color: #ccc;
      color: #fff;
   }
   .btn:active {
      background-color: #f00;
   }
</style>
<button class="btn">点击按钮</button>

Dans cet exemple, la couleur d'arrière-plan du bouton deviendra rouge lorsque vous cliquerez dessus.

3. : pseudo-classe nth-child

: la pseudo-classe nth-child est utilisée pour sélectionner un élément enfant à une position spécifique sous l'élément parent. Par exemple, nous pouvons définir différentes couleurs d’arrière-plan pour les lignes paires et impaires de la liste. L'exemple de code est le suivant :

<style>
   li:nth-child(odd) {
      background-color: #ccc;
   }
   li:nth-child(even) {
      background-color: #f00;
   }
</style>
<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   <li>列表项4</li>
</ul>

Dans cet exemple, la couleur d'arrière-plan des lignes impaires de la liste est grise et la couleur d'arrière-plan des lignes paires est rouge.

2. Analyse des usages courants et exemples de pseudo-éléments

1. ::avant le pseudo-élément

::avant le pseudo-élément est utilisé pour insérer un élément devant le contenu d'un élément et définir des styles pour il. Par exemple, nous pouvons ajouter une balise devant un paragraphe et lui définir un style. L'exemple de code est le suivant :

<style>
   p::before {
      content: "前面插入的元素";
      background-color: #ccc;
   }
</style>
<p>段落内容</p>

Dans cet exemple, une couleur de fond grise apparaîtra devant le paragraphe et le texte « Élément inséré précédemment » sera affiché.

2. ::after pseudo-element

::after pseudo-element est utilisé pour insérer un élément après le contenu d'un élément et définir des styles pour celui-ci. Par exemple, nous pouvons ajouter une balise après un paragraphe et lui définir un style. L'exemple de code est le suivant :

<style>
   p::after {
      content: "后面插入的元素";
      background-color: #ccc;
   }
</style>
<p>段落内容</p>

Dans cet exemple, une couleur de fond grise apparaîtra après le paragraphe et le texte « Élément inséré après » sera affiché.

3. ::pseudo-élément de première lettre

::pseudo-élément de première lettre est utilisé pour sélectionner la première lettre d'un élément et définir des styles pour celui-ci. Par exemple, nous pouvons définir un style spécial pour la première lettre d’un paragraphe. L'exemple de code est le suivant :

<style>
   p::first-letter {
      font-size: 24px;
      color: #f00;
   }
</style>
<p>首字母大写的段落内容</p>

Dans cet exemple, la première lettre du paragraphe deviendra rouge et s'agrandira jusqu'à une taille de police de 24 px.

Cet article explore en profondeur l'utilisation courante et l'analyse d'exemples de pseudo-classes et de pseudo-éléments en CSS, et joint des exemples de code spécifiques. En utilisant rationnellement des pseudo-classes et des pseudo-éléments, nous pouvons contrôler de manière plus flexible le style de la page et obtenir des effets interactifs et visuels plus riches. J'espère que cet article pourra être utile au travail de développement front-end de chacun.

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!