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

Quels sont les pseudo-éléments CSS3 ?

青灯夜游
Libérer： 2022-03-15 15:25:34
original
3652 Les gens l'ont consulté

Les pseudo-éléments CSS3 incluent : 1. « ::after », qui peut insérer du contenu après l'élément spécifié ; 2. « ::before » ; 3. « ::first-letter » ; - ligne"; 5. "::selection"; 6. "::placeholder".

Quels sont les pseudo-éléments CSS3 ?

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

Le pseudo-élément est 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 les 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

<!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-element est le nom du pseudo élément, property est la propriété en CSS, value est la valeur correspondant à l'attribut.

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 de chaque zone de saisie du formulaire (par ex. )

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

运行结果如下图所示：

Quels 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

运行结果如下图所示：

Quels 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

运行结果如下图所示：

Quels 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

运行结果如下图所示：

Quels 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

运行结果如下图所示：

Quels sont les pseudo-éléments CSS3 ?

6. ::placeholder

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