Maison > Article > interface Web > que sont les pseudo-éléments CSS3

que sont les pseudo-éléments CSS3

青灯夜游original: 2022-01-06 11:08:542770parcourir

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.

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;
}

其中，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>

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>

运行结果如下图所示：

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>

运行结果如下图所示：

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>

运行结果如下图所示：

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>

运行结果如下图所示：

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>

运行结果如下图所示：

que sont les pseudo-éléments CSS3

6. ::placeholder

伪元素 ::placeholder 用来设置表单元素（、元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
</body>
</html>

运行结果如下图所示：

que sont les pseudo-éléments CSS3

（学习视频分享：css视频教程）






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

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!

html5 css css3 html Float class Property 对象 dom 选择器伪类伪元素 background input

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：Quelle est la différence entre v-bind et v-model dans vueArticle suivant：Quelle est la différence entre v-bind et v-model dans vue

Articles Liés

Voir plus