共计 2469 个字符，预计需要花费 7 分钟才能阅读完成。
咱们来看个案例，杂志内容中的第一个字符 R。款式是非凡定义过的，如果将杂志内容在浏览器中加载，咱们该如何实现这个成果呢？
这就须要用到 CSS 中中的伪元素选择器来实现了，伪元素选择器，顾名思义：伪：能够了解成假的，元素：就是标签；所以伪元素选择器能够解释成：假元素选择器；
通过伪元素选择器，能够设置元素指定局部的款式。次要用来设置元素内文本的首字母，首行的款式、或是在元素内容之前或之后插入其余内容；
伪元素选择器的根本语法为：selector 双冒号 pseudo([ˈsjuːdəʊ]) 杠 element 花括，号其中 selector 为指标元素；双冒号 pseudo-element，代表的是 向指标元素内，增加伪元素，并对伪元素的内容进行润饰。(selector::pseudo-element{attribute:value})；
selector::pseudo-element {
property: value;
}
在 CSS 选择器中，伪元素选择器有五种：
第一种，双冒号 first-letter(::first-letter) 伪元素，用来实现向文本的首个字符，增加非凡款式。
第二种，双冒号 first-line(::first-line) 伪元素，用来实现向文本的首行，增加非凡款式。
第三种，双冒号 before(::before) 伪元素，用来实现在元素内容之前插入内容。
第四种，双冒号 after(::after) 伪元素，用来实现在元素内容前面，插入内容。
第五种，双冒号 selection(::selection) 伪元素，用来更改选中文本的款式。
配音着：在 004 目录下，新建一个 first_letter_selector.html，构建根本代码，在 body 外面增加一个 div 元素。并且增加文本（“我是一个 div 元素，用来实现元素内的第一个字符增加款式申明”）
持续增加款式，在 head 元素外面增加 style 元素，应用元素选择器，增加款式申明：width:200px;height:200px;backcground-color:red，右侧浏览器中能够查看到，div 元素的款式申明曾经增加实现；
返回代码中，应用伪元素选择器，div 双冒号 first-letter，向 div 中的第一个字符增加款式申明，color:blue；font-size:30px，(div::first-letter{color:blue;font-size:30px})；在这里 font-size 代表的是字号大小，前面，我会具体的为大家介绍字体的相干的款式申明。
保留。持续查看成果，div 元素中的第一个字符曾经增加上了 字体大小和色彩的款式申明；
持续新建一个 first-line-selector.html 文件，构建根本代码，在 body 外面增加一个 div 元素，并且增加文本：（“我是一个 div 元素，用来向元素内的第一行文本增加款式申明”）
持续增加款式，在 head 元素外面增加 style 元素，应用元素选择器，增加款式申明：width:200px;height:200px;backcground-color:red，同样浏览器中能够查看到，div 元素的款式申明，曾经增加实现；
返回代码中，应用伪元素选择器：div::first-line，向 div 中的第一行文本增加款式申明：color:blue；font-size:30px。(div::first-line{color:blue;font-size:30px})；
持续查看成果，div 元素中的第一行文本曾经增加上了 字体大小和色彩的款式申明；
在这里须要留神的是，无论你的元素，宽度变大还是变小，（这里须要演示：批改宽度高度）都只能实现对第一行中的文本独自润饰。
持续在 004 目录下新建一个 before_after_selector.html 的页面文件，构建根本代码，应用同样的办法在 body 外面增加一个 div 元素，并且增加文本：（我是一个 div 元素，用来实现元素外部向前向后插入内容）
应用雷同的办法，为 div 元素增加款式申明：width 200px ;height 200px background-color:red，在浏览器中能看到款式申明曾经增加实现；
返回代码中，应用伪元素选择器：div 双冒号 before，接下来将须要增加的内容“我是向前增加”，作为 content 属性的值来应用，（div::before{content:”我是向前增加”}）；持续编写，div 双冒号 after，将须要增加的内容“我是向后增加”，作为 content 属性的值来应用 (div::after{content:”我是向后增加”})，在浏览器中能够看到，原文本内容前后均呈现了，伪元素选择器插入进来的文本；
返回代码中，在向前，向后填加的 CSS 代码处，增加款式申明：font-size:30px；成果同样也实现了。
在这里须要留神的是：1. 在应用伪元素选择器，向前，向后插入内容之时，必须配合 content 能力实现成果；2. 向前，向后插入进来的内容，都须要合乎 CSS 款式申明的根本语法。
持续在 004 目录下，新建一个 selection_selector.html 的文件，补全根底代码，在 body 外部增加一个 div 元素，并增加筹备好的文本；回到浏览器中应用鼠标选中文本，默认状况下，在浏览器中选中的文本款式为蓝底白字；
如何批改鼠标选中文本时的款式呢？回到代码中，在 head 元素外面增加 style 元素，应用伪元素选择器，div 双冒号 selection，(div::selection{})，并且增加款式申明：color red, background-color:skyblue。回到浏览器，选中文本的款式曾经产生了扭转。
在这里须要揭示大家的是，selection 伪元素选择器只反对以下几个款式申明：color（文本色彩），background（背景），cursor（鼠标款式），outline（描边成果）。
文章配套视频链接：https://www.bilibili.com/vide…