重点 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()等。它们的作用是增强交互体验、提升可访问性并且在按钮、表单、列表布局中非常常见。
