简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Que peuvent faire les pseudo-éléments CSS

Que peuvent faire les pseudo-éléments CSS

青灯夜游
青灯夜游original
2022-06-02 15:04:451537parcourir

Les pseudo-éléments CSS peuvent ajouter des effets spéciaux aux éléments sélectionnés (sélecteurs spécifiés). Un pseudo-élément est un mot-clé ajouté à la fin d'un sélecteur. Grâce aux pseudo-éléments, les développeurs peuvent définir des styles pour des parties spécifiques de l'élément sélectionné sans utiliser l'ID ou les attributs de classe de l'élément. Utilisez les deux points "::" lors de la définition des pseudo-éléments pour distinguer les pseudo-classes et les pseudo-éléments.

Que peuvent faire les pseudo-éléments CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les pseudo-éléments CSS peuvent ajouter des effets spéciaux aux éléments sélectionnés (sélecteurs spécifiés).

Que sont les pseudo-éléments ? Que peut-on faire ?

L'élément est en fait un concept en HTML, et les balises en HTML sont souvent appelées éléments. Alors, que sont les pseudo-éléments ? D'après son nom, false signifie faux et n'existe pas dans le DOM actuel. Mais au fait ? Nous pouvons utiliser certaines fonctionnalités CSS pour le simuler en tant qu'élément. Nous appelons un tel élément un pseudo-élément.

Les pseudo-éléments CSS sont utilisés pour définir des effets spéciaux sur certains sélecteurs ; des positions spécifiques d'éléments peuvent être sélectionnées et des styles appliqués.

Le pseudo-élément est en fait un mot-clé ajouté à la fin du sélecteur. Grâce au pseudo-élément, vous pouvez définir des styles pour des parties spécifiques de l'élément sélectionné sans utiliser l'ID ou l'attribut de classe de l'élément.

Par exemple, grâce aux pseudo-éléments, vous pouvez définir le style de la première lettre d'un paragraphe, ou insérer du contenu avant ou après l'élément, etc.

En CSS1 et CSS2, l'utilisation des pseudo-éléments est la même que celle des pseudo-classes, et un deux-points : est connecté au sélecteur. Cependant, dans CSS3, l'utilisation du simple deux-points pour les pseudo-éléments a été modifiée en double deux-points : pour distinguer les pseudo-classes et les pseudo-éléments. Par conséquent, il est recommandé d’utiliser des doubles-points au lieu de simples deux-points lors de l’utilisation de pseudo-éléments. 

selector::pseudo-element {
    property: value;
}

Parmi eux, selector est le sélecteur, pseudo-élément est le nom du pseudo-élément, property est l'attribut en CSS et value est la valeur correspondant à l'attribut.

Remarque : Un seul pseudo-élément peut être utilisé dans un sélecteur, et le pseudo-élément doit suivre le sélecteur. Conformément à la dernière spécification du W3C, vous devez utiliser des doubles-points :: au lieu de simples deux-points : lors de la définition de pseudo-éléments afin de faire la distinction entre les pseudo-classes et les pseudo-éléments. Cependant, comme l'ancienne version de la spécification du W3C ne faisait pas de distinction particulière, la plupart des navigateurs prennent actuellement en charge les méthodes à simple et double deux-points pour définir des pseudo-éléments.

CSS fournit une série de pseudo-éléments, comme indiqué dans le tableau suivant :

p::avant p::première ligneExemple : utilisation de pseudo-element::after (Partage vidéo d'apprentissage : tutoriel vidéo CSSweb front-end
Pseudo éléments Exemple Exemple de description
::après p::après Insérer du contenu après chaque élément e388a4556c0f65e1904146cc1a846bee ::avant
Insérez du contenu avant chaque élément e388a4556c0f65e1904146cc1a846bee ::première lettre p::première lettre Correspond à la première lettre du contenu de chaque élément e388a4556c0f65e1904146cc1a846bee ::première ligne
Correspond à la première ligne de contenu de chaque élément e388a4556c0f65e1904146cc1a846bee ::sélection p::sélection Faites correspondre la partie de l'élément sélectionnée par l'utilisateur
::espace réservé input::placeholder Faites correspondre l'attribut d'espace réservé de chaque zone de saisie du formulaire (tel que d5fd7aea971a85678ba271703566ebfd) 
<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::after {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::after {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::after {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::after</p>
    <p class="two">伪元素 ::after</p>
    <p class="three">伪元素 ::after</p>
</body>
</html>
, )

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!

Déclaration：
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
Article précédent：Peut-il y avoir des fonctions anonymes dans jquery ?Article suivant：Peut-il y avoir des fonctions anonymes dans jquery ?

Articles Liés

Voir plus