CSS :has() 选择器实战：不用 JS 实现父元素响应子元素状态

做后台表单时经常遇到这种需求：输入框获得焦点或者校验失败时，外层包裹容器要变色、出现边框或提示。以前的做法一般是监听 focus/blur 或配合校验库在父级上切换 class，逻辑散落在 JS 里，组件多了之后状态同步容易漏。CSS 的 :has() 选择器在主流浏览器稳定支持之后，这类"父元素根据子元素状态变化"的场景可以直接用样式表解决，不用再往 DOM 上挂标记。这篇文章从实际表单场景出发