现代伪类增强

现代伪类让 CSS 根据关系、输入状态和表单有效性表达更多条件。:focus-visible 把键盘焦点和鼠标点击区分开，:has() 允许根据后代或兄弟关系选择祖先，:is()、:where() 减少重复选择器，:user-invalid 能配合原生表单校验。

form:has(:user-invalid) .summary { color: crimson; }
button:focus-visible { outline: 3px solid Highlight; }
.card:has(> img) { grid-template-columns: 8rem 1fr; }

:has() 是关系选择器，可能扩大匹配和样式计算范围，应按组件边界使用。它不是脚本查询，也不能替代表单提交或业务校验。:where() 特异性为零，适合作为可被覆盖的默认规则。

实验与练习

用 :has() 根据卡片是否有图片改变布局，用 :focus-visible 比较键盘与鼠标焦点，再用 :user-invalid 标记原生表单错误。关闭 CSS 或浏览器不支持其中一个伪类时，检查页面是否仍有基本可用性。

可运行微实验：能力检测与降级

先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。

常见错误

• 用 :has() 取代所有 JavaScript 状态。
• 把 :focus 删除后不提供 :focus-visible 或其他焦点提示。
• 认为 :user-invalid 等同于服务端校验。

继续阅读

最后把现代能力放回兼容、检测和回退策略：渐进增强与兼容。

练习

1. 用最小输入复现“现代伪类增强”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案