1.CSS伪类和CSS伪元素
(1)伪类和伪元素的作用
同一件事：它们都为各个选择器添加了特殊效果。 区别：
伪类：操作DOM树中现有的元素，并根据元素的不同状态设置样式。 一个选择器中可以有多个伪类；
伪元素：在DOM树之外创建逻辑元素，并为元素中的特定内容设置样式。 一个选择器中只能有一个伪元素； before 和 after 伪元素必须具有内容属性。
(2) 伪类和伪元素的句型
1）伪类句型：
/* 伪类的语法：*/
selector:pseudo-class {property:value;}
/* CSS类也可以使用伪类：*/
selector.class:pseudo-class {property:value;}2）伪元素的句型：
/* 伪元素的语法：*/
selector:pseudo-element {property:value;}或 selector::pseudo-element {property:value;}
/*CSS类也可以使用伪元素*/
selector.class:pseudo-element {property:value;}或selector.class::pseudo-element {property:value;}(3)什么是伪类和伪元素？
1) 什么是 CSS 伪类？
CSS伪类有6种类型，分别是：动态伪类、结构伪类、语言伪类、元素状态伪类、目标伪类和负伪类。
a) 动态伪类
不同的州使用不同的风格。
E:link：选择匹配的E元素，匹配的元素定义有超链接且未被访问过； 常用于链接标签。
E:visited：选择匹配的E元素，匹配的元素定义有超链接，并且已被访问过； 常用于链接标签。
E:hover：选择匹配的E元素，用户键盘停留在元素E上； 常用于链接标签。
E:active：选择匹配的E元素，匹配的元素被激活； 常用于链接标签和按钮。
E:focus：选择匹配的E元素，匹配的元素获得焦点。
b) 结构伪类
E:fisrt-child：选择父元素的第一个子元素。 相当于 E:nth-child(1)。
E:last-child：选择父元素的最后一个子元素。 相当于 E:nth-last-child(1)。
E:root：选择匹配元素E所在文档的根元素。 在HTML文档中，根元素仍然是html，选择器匹配的内容与html类型选择器相同。
EF:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)elementui列表名称高亮，关键字(偶数，奇数)，或者公式(2n+1 )，n 的起始值为 1elementui列表名称高亮，而不是 0。
EF:nth-last-child(n)：选择父元素E底部的第n个子元素F。
E:nth-of-type(n)：选择父元素中具有指定类型的第 n 个 E 元素。
E:nth-last-of-type(n)：选择父元素中具有指定类型的倒数第 n 个 E 元素。
E:first-of-type：选择父元素中第一个指定类型的E元素，相当于E:nth-of-type(1)。
E:last-of-tye：选择父元素内最后一个指定类型的E元素，相当于E:nth-last-of-type(1)。
E:only-child：选择父元素只包含一个子元素，子元素与E元素匹配。
E:only-of-type：选择父元素只包含一个同类型的子元素，且子元素与E元素匹配。
E:empty：选择没有子元素且不包含任何文本节点的元素。
结构伪类选择器可以根据元素在文档中的位置动态选择元素，从而减少 HTML 文档对 ID 或类的依赖，并有助于保持代码干净整洁。
c) 语言伪类
E：lang(语言)：用于匹配使用指定语言的元素。
d) 元素状态伪类
E:checked：匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
E:enabled：匹配每个启用的元素（主要用于表单元素）。
E:disabled：匹配各个禁用元素（主要用于表单元素）。
e) 目标伪类
E:target：选择所有与E匹配的元素，匹配的元素由相关URL指向。 用于改变页面中锚链接URL指向的ID元素的样式。
f) 否定伪类
E:not(F)：匹配除F元素之外的所有E元素
2）什么是CSS伪元素？
::after (:after) 在所选元素中创建前一个子节点
::before (:before) 在所选元素中创建后续子节点
::first-line (:first-line) 选择文本块的第一行字符
::first-letter (:first-letter) 选择文本块第一行的第一个字符
::selection 选择文档中突出显示（反向）的部分
::placeholder 选择数组的占位符文本（提示信息）
::marker 选择手动生成的项目符号列表
::backdrop 与全屏模式下的背景匹配
::slotted() 用于选择放置在 HTML 模板中的这些元素
::inactive-selection 选择非活动状态下文档中高亮（highlight）的部分
