1、伪元素选择器

伪元素选择器（pseudo- selector）：提供更复杂的功能，但并非直接对应html文档定义的元素。

• 伪元素
• 伪类

⚠️伪元素实际上并不存在

1.1、使用::first-line 伪元素选择器

匹配文本块的首行。

<style type="text/css">
::first-line {
background-color:grey;
color:white;
}
</style>

伪元素选择器可以作为修饰符跟其他选择器一起使用。如：p::first- line

⚠️伪元素选择器的前缀是两个冒号，但浏览器认为选择器只有一个冒号。

如果浏览器窗口调整大小，浏览器会重新评估哪些内容属于文档的首行。

1.2、使用::first -letter 选择器

选择文本块的首字母。

<style type="text/css">
::first-letter {
background-color:grey;
color:white;
border: thin black solid;
padding: 4px;
}
</style>

1.3、使用:before 和 :after 选择器

它们会生成内容，并将其插入文档。

<style type="text/css">
a:before {
content: "Click here to "
}
a:after {
content: "!"
}
</style>   
选择a元素对它使用:before 和:after伪元素选择器。通过设置content属性的值可以指定要插入的内容。

⚠️content只能与伪选择器一起使用。

1.4、使用CSS计数器

:before 和 :after 选择器经常跟CSS计数器特性一起使用，结合两者可生成数值内容。

<style type="text/css">
body {
counter-reset: paracount;
}
p:before {
content: counter(paracount) ". ";
counter-increment: paracount;
}
</style>

couter- reset属性为计数器设置名称。

• 可设置初始值如：counter- reset：paracount 10；
• 定义多个计数器，只要在同一条counter- reset声明中添加计数器名称即可，如：counter-reset: paracount 10 othercounter; /*othercounter值为1*/
• 计数器初始化后就能够作为content属性的值，跟:before和:after选择器一起使用来指定样式，如：content: counter(paracount) ". ";before的选择器中，其效果是将当前计数器的值呈现在选择器匹配的所有元素之前，此处，还要在相应的值后面追加一个句点和空格。
• 计数器的值默认表示为十进制整数（1、2、3等），不过，也可以指定其他数值格式，如：content: counter(paracount, lower-alpha) ". ";添加了参数lower-alpha，其功能是指定数值样式
• counter-increment属性专门用来设置计数器增量，该属性的值是要增加计数的计数器的名称，如：counter-increment: paracount;计数器默认增量为1，当然也可以自行指定其他增    量，如：counter-increment: paracount 2;