CSS :has() 选择器实战:不用 JS 实现父元素响应子元素状态
做后台表单时经常遇到这种需求:输入框获得焦点或者校验失败时,外层包裹容器要变色、出现边框或提示。以前的做法一般是监听 focus/blur 或配合校验库在父级上切换 class,逻辑散落在 JS 里,组件多了之后状态同步容易漏。CSS 的 :has() 选择器在主流浏览器稳定支持之后,这类"父元素根据子元素状态变化"的场景可以直接用样式表解决,不用再往 DOM 上挂标记。这篇文章从实际表单场景出发,讲清楚 :has() 的匹配规则、相对选择器写法的限制、它和 :focus-within 的分工,以及性能上需要注意的地方,顺带记录几个我在真实项目里踩过的坑。