开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
一、简介
伪类
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。
伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如
::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。
二、区别
- 伪元素是创建出一个新元素，伪类是一个已存在但我们不能直接看到的元素
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息
- 伪元素本质上是创建了一个有内容的虚拟容器
- CSS3中伪类和伪元素的语法不同； 伪类
:link:hover伪元素::before::after
三、举例
伪元素
| 伪元素 | 描述 |
|---|---|
| ::after | 在每个元素之后插入内容 |
| ::before | 在每个元素之前插入内容 |
| ::first-letter | 匹配每个元素中内容的首字母 |
| ::first-line | 匹配元素中第一行的文本 |
| ::selection | 匹配用户被用户选中或者处于高亮状态的部分 |
| ::placeholder | 匹配占位符的文本，只有元素设置了 placeholder 属性时，该伪元素才能生效 |
伪类
1、状态
| 伪类 | 描述 |
|---|---|
| :link | 选择未访问的链接 |
| :visited | 选择已访问的链接 |
| :hover | 选择鼠标指针浮动在其上的元素 |
| :active | 选择活动的链接 |
| :focus | 选择获取焦点的输入字段 |
2、结构化
| 伪类 | 描述 |
|---|---|
| :not | 否定伪类，用于匹配不符合参数选择器的元素 |
| :first-child | 匹配元素的第一个子元素 |
| :last-child | 匹配元素的最后一个子元素 |
| :first-of-type | 匹配属于其父元素的首个特定类型的子元素的每个元素 |
| :last-of-type | 匹配元素的最后一个子元素 |
| :nth-child | 根据元素的位置匹配一个或者多个元素，它接受一个 an+b 形式的参数，an+b 匹配到的元素示例如下：(1) 1n+0，或 n，匹配每一个子元素; (2) 2n+0，或 2n，匹配位置为 2、4、6、8… 的子元素，该表达式与关键字 even 等价; (3) 2n+1 匹配位置为 1、3、5、7… 的子元素、该表达式与关键字 odd 等价; (4) 3n+4 匹配位置为 4、7、10、13… 的子元素。 |
| :nth-last-child | 与:nth-child 相似，不同之处在于它是从最后一个子元素开始计数的 |
| :nth-of-type | :nth-of-type 与 nth-child 相似，不同之处在于它是只匹配特定类型的元素 |
| :nth-last-of-type | :nth-last-of-type 与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的 |
| :only-child | 当元素是其父元素中唯一一个子元素时，:only-child 匹配该元素 |
| :only-of-type | 当元素是其父元素中唯一一个特定类型的子元素时，:only-child 匹配该元素 |
| :target | 当 URL 带有锚名称，指向文档内某个具体的元素时，:target 匹配该元素 |
此外，还有表单相关语言相关的等，感兴趣的可以了解下
