常用的伪类和伪元素

常用的伪类：

一个 CSS 伪类是以一个冒号（ : ）作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。例如 :hover，当用户悬停在指定元素时，可以在这个状态给指定元素添加相应的样式，是在 DOM 树无法描述的状态下才能给元素添加样式。

• :link 未访问的节点，通常用于 a 标签

• :visited 已访问的节点，通常用于 a 标签

• :hover 鼠标悬浮的节点

• :active 当前选中的节点

• :first-child 第一个子节点

• :last-child 最后一个子节点

• :enabled 启用的元素，通常用于表单

• :focus 当前取的焦点的元素

• :checked 选中的元素，通常用于表单 checkbox 元素

• :disabled 未启用的元素，通常用于表单

• :first-of-type 表示一组兄弟元素中指定类型的第一个元素

• :last-of-type 表示一组兄弟元素中指定类型的最后一个元素（类似 :first-of-type）

• :not 一个否定伪类，用于匹配不符合参数选择器的元素

• :nth-child 这个 CSS 伪类首先会找到当前元素的兄弟元素，然后按照位置的先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...）。如果 an+b 为 0，无法选中任何元素

• :nth-of-type 与 nth-child 相似，不同之处在于它是只匹配特定类型的元素

• :nth-last-child 与 nth-child 相似，它是从最后一个子元素开始计数的

• :nth-last-of-type 与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的

常用的伪元素：

伪元素的前缀是两个冒号 ( :: ) ， 同样是添加到选择器后面去选择某个元素的某个部分。伪元素创建了不存在 DOM 树中的元素，并为其添加样式。例如，::after 选择元素后，在其内容后使用 content 添加内容。虽然可以看到添加的内容，但是这些内容实际上不存在 DOM 树中

• ::before 元素内容前插入新内容

• ::after元素内容之后插入新内容

• ::first-letter 文本首字母。常用于对文本首字母设置样式

• ::first-line 文本首行。常用于对文本首行设置样式。仅用于块级元素。

• ::selection 选中的内容。常用于文本。

• ::placeholder 占位符。用于设置占位符的样式。