Analyse du sélecteur de pseudo-éléments d'apprentissage du pseudo-sélecteur CSS

Dans l'article précédent « Qu'est-ce qu'un sélecteur hiérarchique en CSS ? Comment l'utiliser ? ", nous avons découvert 4 types de sélecteurs hiérarchiques. Parlons des pseudo-sélecteurs. Ils fournissent des fonctions plus complexes, mais ne correspondent pas directement aux éléments que devraient avoir les documents HTML. Il existe deux principaux types de pseudo-sélecteurs : les pseudo-éléments et les pseudo-classes. Parlons d’abord en détail des sélecteurs de pseudo-éléments.

Sélecteur de pseudo-éléments

Le sélecteur de pseudo-éléments en CSS consiste à ajouter des mots-clés au sélecteur CSS spécifié. Utilisé pour décrire le style d'une partie spécifique d'un élément spécifié. [Apprentissage recommandé : Tutoriel vidéo CSS]

Grâce aux pseudo-éléments, les développeurs peuvent définir des styles pour des parties spécifiques des éléments sélectionnés sans utiliser l'ID ou les attributs de classe des éléments. 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 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。

语法结构如下所示：

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

现在应该都采用两个冒号的方式，除非你还兼容IE8。

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

La structure syntaxique est la suivante :

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

Vous devez maintenant utiliser deux deux-points, à moins que vous ne soyez également compatible avec IE8.

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. Pseudo-éléments ExempleExemple de description::afterp::after dans each Insérer du contenu après l'élément

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

letter

correspond à la première lettre::first-linep::first-linecorrespond à la première ligne de chaque élément

correspond à 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 exemple )

::before和::after伪元素

::before 伪元素 的作用是作为定位的HTML元素的第一个子级元素，::after ** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

代码运行结果如下图所示：

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

• none：不会产生伪类元素。

• normal：::before伪元素和::after伪类元素中会被视为 none。

• text：文本内容。

• url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        /* 匹配第一行 */
        p::first-line {
            background-color: lightcoral;
        }

        /* 匹配第一个字 */
        p::first-letter {
            font-size: 130%;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

代码运行结果如下图所示：

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的。

::first-letter选择器可以设置的CSS属性：

• font属性

• color属性

• background属性

• margin属性

• padding属性

• border属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• float属性

• clear属性

::first-line选择器可以设置的CSS属性：

• font属性

• color属性

• background属性

• word-spacing属性

• letter-spacing属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• clear属性

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

代码运行结果如下图所示：

::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>

代码运行结果如下图所示：

（学习视频分享：web前端入门）

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

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!