直接写 .parent:has(.child) 不生效主因是浏览器支持度不足且语法受限：Chrome 105+、Safari 15.4+、Firefox 103+（需开启实验标志）才支持，且 :has() 必须位于选择器最末尾，不可嵌套于其他上下文如 div .parent:has(.child)。
为什么直接写 .parent:has(.child) 不生效？
因为浏览器支持度还没到“开箱即用”程度。Chrome 105+、Safari 15.4+、Firefox 103+ 才支持 :has()，且 Firefox 默认仍需开启实验性标志（layout.css.has-selector.enabled）。更关键的是：:has() **不能出现在选择器开头以外的位置**——比如 div .parent:has(.child) 是非法的，会整个规则被忽略。
实操建议：
- 务必在目标元素上直接使用
:has()，如.parent:has(.child)，而非嵌套在其他上下文中 - 用
@supports selector(:has(*))包裹样式，避免不支持时引发意外回退（比如旧版 Safari 完全忽略整条规则） - 开发时打开浏览器开发者工具的“Rendering”面板，勾选“Highlight updates when :has() matches”，能实时看到匹配状态
:has() 中怎么写多条件或否定逻辑？
:has() 支持组合和伪类，但语法比想象中严格。它内部是一个完整的选择器列表，可包含空格、>、+、~，也能用 :not()，但不能嵌套另一个 :has()。
常见写法与陷阱：
-
.card:has(.badge:not([hidden]))✅ 匹配有可见 badge 的 card -
.form:has(input:invalid + button)✅ input 失效后紧邻的 button 存在时才触发 -
.list:has(li:first-child, li:last-child)✅ 满足任一条件即可（逗号是“或”） -
.container:has(:is(.a, .b))✅ 可用:is()简化多类匹配 -
.item:has(.child):has(.meta)❌ 错误！这是两个独立伪类，不是“同时存在”。应写成.item:has(.child, .meta)或更准确的.item:has(.child):has(.meta)（虽然冗余但合法）
用 :has() 控制父级状态时，哪些交互容易出问题？
:has() 是 CSS 原生状态检测，但它**不监听 DOM 变动事件**，只依赖渲染树快照。这意味着 JS 动态增删子元素后，样式不会立刻更新——尤其在使用 innerHTML 或未触发重排的操作中。
典型场景与对策：
- 用
element.append(child)添加子节点 → 触发重排，:has()通常能及时响应 - 用
element.innerHTML = '...'替换内容 → 浏览器可能跳过部分重排，导致样式延迟一帧甚至卡住；改用replaceChildren()更可靠 - 配合
display: none切换子元素 →:has(.child)仍会匹配（display: none不等于不存在），要用[hidden]或移除节点本身 - 表单控件（如
input[type="checkbox"]）状态变化 →:has(input:checked)是可靠的，但注意 label 关联点击不会自动触发重绘，建议加input:focus或强制input.offsetHeight触发同步
替代方案：当 :has() 不可用或不够用时怎么办？
别硬扛。真实项目里常要降级：比如服务端渲染时无法用 :has()，或者需要响应式地监听多个子元素状态变化（如“至少两个 .error 出现”这种逻辑）。
轻量级兜底策略：
- JS 简单打标：
parent.classList.toggle('has-error', parent.querySelector('.error') !== null)，然后写.parent.has-error { ... } - 用
MutationObserver监听子节点增删，仅在必要时更新 class，避免高频重排 - 对表单场景，优先用
:user-invalid（Chrome 125+）、:valid等原生伪类，比:has(input:invalid)兼容性更好、性能更高 - 如果只是控制显示/隐藏，考虑用
inert属性 +[inert] > *配合:has()降级，比纯 JS 更声明式
真正难处理的是跨层级、带计算的状态（比如“子元素总高度 > 200px”），这种没法用 :has() 解决，必须 JS 测量 + class 控制——别试图用 CSS hack 绕过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
