CSS伪类选择器完全指南
通过通俗易懂的解释和交互式演示掌握伪类选择器
伪类选择器是CSS中用于选择元素特定状态的关键工具。它们让你可以根据用户交互、元素位置或表单状态等条件来应用样式。无需修改HTML结构，就能创建动态效果！
1 链接状态伪类
用于链接的不同状态，必须按特定顺序定义才能正常工作。
a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 鼠标悬停 */
a:active {} /* 点击时刻 */
a:focus {} /* 键盘聚焦 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 鼠标悬停 */
a:active {} /* 点击时刻 */
a:focus {} /* 键盘聚焦 */
2 结构伪类
基于元素在文档中的位置来选择元素。
:first-child {} /* 父元素的首个子元素 */
:last-child {} /* 父元素的最后一个子元素 */
:nth-child(n) {} /* 父元素的第n个子元素 */
:nth-last-child(n) {} /* 倒数第n个子元素 */
:first-of-type {} /* 同类型中的第一个 */
:last-of-type {} /* 同类型中的最后一个 */
:only-child {} /* 没有兄弟元素的元素 */
:empty {} /* 没有任何内容的元素 */
:last-child {} /* 父元素的最后一个子元素 */
:nth-child(n) {} /* 父元素的第n个子元素 */
:nth-last-child(n) {} /* 倒数第n个子元素 */
:first-of-type {} /* 同类型中的第一个 */
:last-of-type {} /* 同类型中的最后一个 */
:only-child {} /* 没有兄弟元素的元素 */
:empty {} /* 没有任何内容的元素 */
第一个子元素(粉色背景)
第二个子元素(带左边框)
第三个子元素(动画效果)
第四个子元素(带右边框)
最后一个子元素(蓝色背景)
唯一子元素(绿色背景)
3 表单状态伪类
针对表单元素的不同状态应用样式。
:focus {} /* 获得焦点的元素 */
:checked {} /* 被选中的复选框/单选 */
:disabled {} /* 被禁用的元素 */
:enabled {} /* 启用的元素 */
:required {} /* 必填字段 */
:optional {} /* 选填字段 */
:valid {} /* 有效输入 */
:invalid {} /* 无效输入 */
:checked {} /* 被选中的复选框/单选 */
:disabled {} /* 被禁用的元素 */
:enabled {} /* 启用的元素 */
:required {} /* 必填字段 */
:optional {} /* 选填字段 */
:valid {} /* 有效输入 */
:invalid {} /* 无效输入 */
4 其他常用伪类
其他非常有用的伪类选择器。
:not(selector) {} /* 不符合选择器的元素 */
:target {} /* URL片段标识指向的元素 */
:root {} /* 文档的根元素(html) */
:lang(language) {} /* 特定语言的元素 */
:is(selector) {} /* 匹配列表中任意选择器 */
:where(selector) {} /* 优先级为0的:is() */
:target {} /* URL片段标识指向的元素 */
:root {} /* 文档的根元素(html) */
:lang(language) {} /* 特定语言的元素 */
:is(selector) {} /* 匹配列表中任意选择器 */
:where(selector) {} /* 优先级为0的:is() */
普通段落
特殊段落(.special类)
另一个普通段落
使用:not(.special)选择器的效果会跳过特殊段落
重要注意事项：
- 🔑 链接伪类(LVHA)顺序很重要：:link → :visited → :hover → :active
- 🎯 :hover和:focus常一起使用，确保键盘和鼠标用户都有反馈
- 📐 结构伪类是基于元素在DOM树中的位置，而不是视觉位置
- 🔢 :nth-child()的参数可以是数字、关键字(even/odd)或公式(如2n+1)
- ⚡ :not()伪类不接受其他伪类作为参数，仅接受简单选择器
- 🌐 :root选择器优先级高于html选择器
- ✅ 表单验证伪类(:valid/:invalid)不需要JS即可工作