伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪类

是什么

用于已有元素处于某种状态时为其添加对应的样式。

语法

：

使用数量

多个

使用位置

前方和后方

类与元素

修饰

使用场景

状态类：

• :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 （实验中）