父元素可通过 CSS :has() 伪类响应子元素的 :hover 或 :focus 状态，如 .card:has(.delete-btn:hover) 添加阴影；需注意语法顺序、浏览器兼容性及 display: none 元素不可被匹配。
父元素怎么响应子元素的 :hover 或 :focus 状态
直接用 :has() 就行，不需要 JavaScript。比如让一个 .card 在其内部的 .delete-btn 被悬停时整体加阴影：
.card:has(.delete-btn:hover) {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
注意：:has() 必须写在父选择器之后，不能反向写成 .delete-btn:hover:has(..) —— 这是语法错误，浏览器会直接忽略整条规则。
表单中父容器根据 input 验证状态变色
常见场景是 input 失焦后校验失败，父级 .form-field 显示红色边框。传统做法靠 JS 切换 class，现在可纯 CSS 实现：
.form-field:has(input:invalid:focus-visible) {
border-color: #e53e3e;
}
.form-field:has(input:valid) {
border-color: #38a169;
}
关键点：:invalid 和 :valid 依赖 required、type="email" 等原生校验属性；若 input 初始为空且无 required，:invalid 不会触发 —— 别忘了补上语义化属性。
:has() 嵌套和伪类组合的兼容性陷阱
Chrome 105+、Safari 15.4+、Firefox 121+ 支持 :has()，但旧版 Safari（如 iOS 15.6）完全不支持，且不支持某些嵌套写法：
-
:has(.btn:disabled + .tooltip)✅ 可用 -
:has(:is(.btn:disabled, .icon):hover)❌ Firefox 121 之前报解析错误 -
:has(*:focus-within)✅ 但性能较差，慎用于深层 DOM
建议上线前用 @supports selector(:has(*)) 做特性检测，降级方案保留 class 切换逻辑。
为什么 :has() 不能匹配 display: none 的子元素
:has() 只匹配「渲染树中存在」的元素，display: none 会让元素彻底脱离渲染树，因此无法被匹配。例如：
.wrapper:has(.hidden-item) { /* 永远不生效 */ }
如果需要响应“视觉隐藏但 DOM 存在”的状态，改用 visibility: hidden 或 opacity: 0；或者用 aria-hidden="true" 配合 JS 控制 class，避免误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
