伪类和伪元素

重点 1：伪类和伪元素的区别

• 伪类：描述“状态”或“位置”

  • 例：:hover、:first-child

• 伪元素：创建一个虚拟元素来添加样式

  • 例：::before、::after

面试回答模板：

伪类是用来匹配元素的状态或结构关系的选择器，伪元素则是用来创建一个虚拟内容节点进行样式控制。

重点 2：常见伪类的用途

你至少要能说出：

• :hover：悬停
• :active：按下
• :focus/:focus-visible：聚焦
• :disabled：禁用
• :first-child/:last-child/:nth-child()：位置
• :not()：取反

重点 3：组合使用

比如：

button:hover:not(:disabled) {

transform: scale(1.05);

}

这体现了“条件组合”的思维，非常适合面试里展示你对 CSS 选择器的理解。

---

5. 最好记的口诀

可以这样记：

• “看状态”用状态伪类：

  • :hover、:active、:focus、:disabled

• “看位置”用结构伪类：

  • :first-child、:last-child、:nth-child()

• “反向筛选”用逻辑伪类：

  • :not()

---

6. 你可以直接背的短版答案

伪类是 CSS 选择器的一种，用来根据元素的状态、位置或条件来匹配样式。常见的有:hover、:active、:focus、:disabled、:first-child、:nth-child()、:not()等。它们的作用是增强交互体验、提升可访问性，并且在按钮、表单、列表布局中非常常见。

---