伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪类
是什么
用于已有元素处于某种状态时为其添加对应的样式。
语法
：
使用数量
多个
使用位置
前方和后方
类与元素
修饰
使用场景
状态类：
- :link a链接未被访问时
- :visited a链接已被访问时
- :hover 鼠标悬停时
- :active 鼠标点击与释放时
- :focus 输入焦点时
结构类：
- :first-child 父元素的第一个子元素
- :last-child 父元素的最后一个子元素
- :nth-child(n) 父元素的第 n 个子元素
- :nth-of-type(n) 同类型中第 n 个同级兄弟
表单类：
- :checked 处于选中状态
- :disabled 处于禁用状态
- :valid 匹配输入值为合法的元素
- :required 指选择器在表单元素是必填项时设置指定样式。只适用于表单元素: input, select 和 textarea。
语言类：
- :dir 匹配指定阅读方向的元素
- :lang 匹配带有指定 lang 属性的元素
伪元素
是什么
不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
语法
::
使用数量
单个
使用位置
后方
类与元素
创建对象
使用场景
- ::before 和 ::after 设置在对象前后发生变化的内容，和content属性一起使用。
- ::first-letter 对象内的第一个字符
- ::first-line 对象内的第一行
- ::selection 对象被选择时
- ::placeholder 对象被文字占位时
- ::backdrop （实验中）