伪元素选择器

2023年02月14日

柏拉文

越努力，越幸运

前言

概念: 伪类是选择器的一种，它用于选择处于特定状态的元素。伪元素开头为双冒号::

对比: 伪类与伪元素有什么区别?

element::after

element::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。

element::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。

element::selection 匹配文档中被选择的那部分。

element::first-line 匹配包含此伪元素的元素的第一行。

element::first-letter 匹配元素的第一个字母。

element::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分

element::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
```
a:hover {color: #FF00FF}
p:first-child {color: red}
```
伪元素: 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
```
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
```

总结: 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。