CSS3伪类通过明确结构选择和状态描述的语义，解决了CSS2中模糊重叠的问题；如:nth-child(n)按位置计数，:nth-of-type(n)按类型计数；:not()支持复杂选择器；新增:focus-within、:target等动态伪类；兼容性是落地关键，需按目标浏览器谨慎选用。
CSS3伪类不是“新增了一堆功能”，而是把原来模糊、重叠、靠猜的规则，理清楚了——尤其是结构选择和状态描述这两块。你写 :nth-child(2) 能跑，但写 :nth-of-type(2) 时效果不同，这不是 bug，是 CSS3 明确区分了「位置」和「类型」。
结构伪类从模糊匹配变成精确语义
CSS2 只有 :first-child、:last-child 这类基于“顺序”的选择器，但没说明它是否关心元素类型。实际中，div:first-child 会选中父元素下第一个子元素，**且必须是 div**；而 CSS3 新增的 :first-of-type 则忽略中间夹杂的其他标签，只找“第一个 div”。
-
:nth-child(n)：第 n 个子元素，不管类型（<p></p>、<span></span>、<div> 全算进去） <li> <code>:nth-of-type(n)：第 n 个同类型元素（只数div，跳过其他） -
:only-child：该元素是父元素唯一子元素（且类型不限） -
:only-of-type：该元素是父元素中唯一同类型子元素（允许其他类型存在）
这两个系列在 IE9+ 才完全支持，IE8 只认 :first-child 等老写法。
:not() 从单参数升级为支持复杂选择器
CSS2 的 :not() 只能接受一个简单选择器，比如 :not(.disabled) 或 :not(div)；CSS3 放开了限制，允许传入完整复合选择器，例如：
立即学习“前端免费学习笔记（深入）”；
article:not(.draft):not([data-status="archived"]) { opacity: 1; }
但注意：:not() 里不能嵌套另一个 :not()，也不能用伪元素（如 ::before），否则整个选择器失效。Chrome 60+、Firefox 52+、Safari 10.1+ 支持，IE 完全不支持。
动态伪类扩展了可响应的交互维度
CSS2 的 :hover、:focus、:active 仅限基础交互；CSS3 加入了更细粒度的状态判断：
-
:focus-within：当元素自身或其任意后代获得焦点时触发（适合表单容器高亮） -
:target：匹配 URL 中 fragment（#section1）指向的元素 -
:enabled/:disabled：明确作用于表单控件，比[disabled]更语义化 -
:checked：专用于<input type="radio">或<input type="checkbox">，不依赖 JS 监听
其中 :focus-within 在 Safari 15.4+ 才稳定支持，旧版 Safari 需 fallback；:target 虽然兼容性好，但页面初始加载时若 fragment 不存在，不会触发样式回退。
浏览器对伪类的支持差异比语法更关键
很多开发者以为写了 CSS3 伪类就自动生效，其实真正卡住的是兼容性断层：
-
:is()和:where()是现代简化选择器的利器，但它们属于「CSS Selectors Level 4」，Edge 110+、Chrome 105+、Firefox 103+ 才支持，旧项目慎用 -
:has()（父选择器）目前仅 Chrome 105+、Safari 15.4+ 实现，Firefox 尚未启用，默认关闭 - 所有 CSS3 结构伪类在 IE 中最多支持到
:nth-child()（IE9+），:nth-of-type()及以上全部不识别
别只盯着冒号数量或名字新旧——真正决定能否上线的，是目标用户环境里那个最老的浏览器能不能 parse 并执行它。写完记得在真实设备上验证，而不是只看 DevTools 是否报错。
