Quelles sont les fonctions et les différences entre les pseudo-éléments et les pseudo-classes ?

Les pseudo-éléments et les pseudo-classes sont deux concepts importants en CSS et jouent un rôle très clé dans la conception Web. Cet article présentera en détail les différences et les fonctions des pseudo-éléments et des pseudo-classes, et fournira des exemples de code spécifiques.

1. Pseudo-éléments
Les pseudo-éléments sont un moyen de créer virtuellement des éléments dans un document. Les pseudo-éléments sont représentés par des doubles deux-points (::). Les pseudo-éléments courants sont les suivants : 

1. ::before pseudo-élément : Le pseudo-élément
   ::before est utilisé pour créer un élément virtuel devant l'élément sélectionné. Le contenu des pseudo-éléments peut être défini via l'attribut content.

Exemple de code :

<style>
    p::before {
        content: "前方的虚拟元素";
        color: red;
    }
</style>
<p>这是正常的段落。</p>

Avec le code ci-dessus, un texte rouge "Élément factice devant" sera inséré avant l'élément de paragraphe.

2. ::after pseudo-élément : Le pseudo-élément
   ::after est utilisé pour créer un élément virtuel derrière l'élément sélectionné. Vous pouvez également utiliser l'attribut content pour définir le contenu du pseudo-élément.

Exemple de code :

<style>
    p::after {
        content: "后方的虚拟元素";
        color: blue;
    }
</style>
<p>这是正常的段落。</p>

Avec le code ci-dessus, un texte bleu "élément factice arrière" sera inséré après l'élément de paragraphe.

2. Pseudo-classe
La pseudo-classe est utilisée pour sélectionner l'état modifié d'un élément spécifique ou pour sélectionner un élément à une position spécifique. Les pseudo-classes sont représentées par un seul deux-points (:). Les pseudo-classes courantes sont les suivantes :

1.  : pseudo-classe de survol :
    : la pseudo-classe de survol est utilisée pour sélectionner l'état lorsque la souris survole l'élément. .

Exemple de code :

<style>
    a:hover {
        color: red;
    }
</style>
<a href="#">鼠标悬停时变为红色</a>

Le code ci-dessus définira la couleur de la police sur rouge lorsque la souris survole le lien.

2. :pseudo-classe active :
   :la pseudo-classe active est utilisée pour sélectionner l'état dans lequel l'élément est activé, généralement lorsque la souris est enfoncée sur l'élément mais n'est pas relâchée.

Exemple de code :

<style>
    button:active {
        background-color: blue;
    }
</style>
<button>按钮</button>

Le code ci-dessus définira la couleur d'arrière-plan sur bleu lorsque le bouton est enfoncé mais pas relâché.

3. : pseudo-classe nth-child :
   : la pseudo-classe nth-child est utilisée pour sélectionner les éléments enfants spécifiés d'un élément.

Exemple de code :

<style>
    li:nth-child(2) {
        color: red;
    }
</style>
<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
</ul>

Le code ci-dessus sélectionnera le deuxième élément li de la liste et définira la couleur de son texte sur rouge.

Résumé :
Les pseudo-éléments et pseudo-classes jouent un rôle important en CSS. Les pseudo-éléments sont utilisés pour créer des éléments virtuels avant et après l'élément sélectionné, tandis que les pseudo-classes sont utilisées pour sélectionner l'état ou la position d'un élément spécifique. Grâce à l'utilisation flexible de pseudo-éléments et de pseudo-classes, nous pouvons contrôler le style des pages Web de manière plus abondante et plus fine.

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!