communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Questions et réponses frontales > que sont les pseudo-éléments CSS3

que sont les pseudo-éléments CSS3

青灯夜游
Libérer： 2022-01-06 11:08:54
original
2813 Les gens l'ont consulté

En CSS3, le pseudo-élément est un mot-clé ajouté à la fin du sélecteur. Sa signification littérale est « faux élément » ou « élément de déguisement », qui est en fait un pseudo-élément principalement utilisé pour créer certains éléments ; qui ne sont pas dans les éléments DOM de l'arborescence et ajoutez-leur des styles.

que sont les pseudo-éléments CSS3

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

pseudo-éléments css3

Les pseudo-éléments sont littéralement compris comme des "faux éléments" ou des "éléments déguisés". En fait, cela peut être compris de cette façon. Les pseudo-éléments sont en fait des éléments virtuels qui n'existent pas (sous forme de code), et vous ne pouvez pas les trouver dans le document, donc les pseudo-éléments sont des éléments virtuels.

Le pseudo-élément est un mot-clé ajouté à la fin du sélecteur, principalement utilisé pour créer des éléments qui ne sont pas dans l'arborescence DOM et leur ajouter des styles.

Avec les pseudo-éléments, vous pouvez définir des styles pour des parties spécifiques de l'élément sélectionné sans recourir à l'ID ou aux attributs 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é remplacée par un 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. :与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。

selector::pseudo-element {
    property: value;
}
Copier après la connexion

其中，selector 为选择器，pseudo-element 为伪元素的名称，property 为 CSS 中的属性，value 为属性对应的值。

注意：一个选择器中只能使用一个伪元素，而且伪元素必须紧跟在选择器之后。按照最新的 W3C 规范，在定义伪元素时您应该使用双冒号::而不是单个冒号:

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

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. Selon la dernière spécification du W3C, vous devez utiliser des doubles deux-points :: au lieu de simples deux-points : lors de la définition de pseudo-éléments pour distinguer les pseudo-classes des 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 : Pseudo-élémentExempleExemple de description::afterp::afterDans chaque

Insérer du contenu après l'élément

::beforep::beforeInsérer du contenu avant chaque élément

correspond à la première lettre du contenu de chaque élément

::selectionp::selectioncorrespond à la partie de l'élément sélectionnée par l'utilisateur::placeholderinput::placeholdercorrespond à l'attribut placeholder

1. ::after

伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。

下面通过一个示例来演示伪元素 ::after 的使用：

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

运行结果如下图所示：

que sont les pseudo-éléments CSS3

2. ::before

伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。

下面通过一个示例来演示伪元素 ::before 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::before {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::before {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::before</p>
    <p class="two">伪元素 ::before</p>
    <p class="three">伪元素 ::before</p>
</body>
</html>
Copier après la connexion

运行结果如下图所示：

que sont les pseudo-éléments CSS3

3. ::first-letter

伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-letter 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-letter{
            font-size: 2em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>伪元素 ::first-letter</p>
</body>
</html>
Copier après la connexion

运行结果如下图所示：

que sont les pseudo-éléments CSS3

4. ::first-line

伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-line 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line{
            font-size: 1.5em;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。</p>
</body>
</html>
Copier après la connexion

运行结果如下图所示：

que sont les pseudo-éléments CSS3

5. ::selection

伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。

下面通过示例来演示伪元素 ::selection 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。 </p>
</body>
</html>
Copier après la connexion

运行结果如下图所示：

que sont les pseudo-éléments CSS3

6. ::placeholder

伪元素 ::placeholder 用来设置表单元素（、

de chaque zone de saisie du formulaire (par ex. )