Pseudo-classe CSS-elements(pseudo-éléments)

Pseudo-classe CSS-Les éléments pseudo-éléments sont un mot clé ajouté à la fin du sélecteur, qui permet de modifier le style de parties spécifiques de l'élément sélectionné. Note : comparé aux pseudo-éléments, pseudo-Les classes (pseudo-classes) peuvent changer le style des éléments en fonction de leur état.

Les pseudo-éléments CSS sont une méthode de stylisation des éléments du document, qui n'ont pas de position définie explicitement dans l'arbre du document.

Qu'est-ce que le pseudo-élément

Les pseudo-éléments CSS vous permettent de définir le style d'un élément ou d'une partie de l'élément sans ajouter d'ID ou de classe. Cela est très utile lorsque vous souhaitez appliquer un style à la première lettre d'un paragraphe pour créer un effet de premier mot enfoncé, ou insérer du contenu avant ou après un élément via une feuille de style, etc.

CSS3 La syntaxe double deux-point (::) a été introduite pour pseudo-éléments pour les distinguer des pseudo-classes. La nouvelle syntaxe des pseudo-éléments peut être donnée de la manière suivante :

Ces sont les pseudo-éléments les plus couramment utilisés :

::first-pseudo-élément line de la première ligne

Le ::first-Le pseudo-élément line applique un style spécial au premier ligne de texte.

Dans l'exemple suivant, les règles de style définissent le format du premier ligne de texte du paragraphe. La longueur de la première ligne dépend de la taille de la fenêtre du navigateur ou de l'élément conteneur.

p::first-line {
　　　　color: #ff0000;
　　　　font-variant: small-caps;
}

:: first-pseudo-élément letter

::first-Le pseudo-élément letter est utilisé pour ajouter des styles spéciaux à la première lettre du premier ligne de texte. Dans l'exemple suivant, les règles de style définissent le format de la première lettre du paragraphe et créent un effet de premier mot enfoncé.

p::first-letter　{
　　　　color: #ff0000;
　　　　font-size:　xx-large;
}

Pseudo-éléments :: before et :: after

::before et ::after pseudo-éléments peuvent être utilisés pour insérer du contenu généré avant ou après le contenu d'un élément. content Lorsque les propriétés CSS sont combinées avec ces pseudo-éléments, le contenu généré est inséré.

Cela est très utile pour décorer davantage les éléments riches en contenu qui ne devraient pas faire partie du marquage réel de la page. Vous pouvez utiliser ces pseudo-éléments pour insérer des chaînes normales ou des objets intégrés (par exemple, des images) et d'autres ressources.

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

Pseudo-éléments et classes CSS

Généralement, nous n'avons besoin que de ces pseudo-éléments pour définir un paragraphe de texte ou un autreBlocLes styles des éléments. Là, l'annonce d'une classe pour un pseudo-élément fonctionne. Les pseudo-éléments peuvent être utilisés avecClasse CSSLes combinaisons produisent des effets, en particulier pour les éléments avec cette classe.

Les règles de style dans les exemples suivants afficheront la première lettre de tous les paragraphes avec la classe "article" en vert, de taille xx-large。

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}