:has()用于选中有特定子元素的父容器，但仅支持后代/子元素检查，不支持兄弟选择器、不能在:not()内使用，且不实时响应动态状态变化，需注意浏览器兼容性与性能限制。
用 :has() 选中有特定子元素的父容器
直接写 :has() 就行，但必须注意浏览器支持和选择器位置——它只能用于后代/子元素检查，不能写在伪类链末尾，也不能用在 :not() 内部（Chrome 125+ 已部分支持，但 Safari 17.4 仍不支持 :not(:has(...))）。
常见错误是把 :has() 当成“响应式监听器”：它不会随子元素动态状态（如 :focus-within 那样）实时重算样式，只在 DOM 结构变化或样式重计算时触发。所以别指望靠 JS 改 class 后它立刻反应——得触发重排或用 force reflow 技巧（不推荐）。
-
div:has(input:checked)→ 选中包含已勾选input[type="checkbox"]的div -
.card:has(.status.error)→ 选中内部有.status.error元素的卡片 - 不能写
input:has(+ label)——:has()不接受兄弟选择器作为参数（会报语法错误）
改变父元素背景色的写法和限制
目标明确：子元素满足条件 → 父容器 background-color 变化。关键点是父容器必须是 :has() 的主选择器，不是子元素本身。
例如想让表单组在输入框出错时整体变红背景：
.form-group:has(input:invalid) {
background-color: #fff2f2;
}
但要注意：:invalid 在用户未交互前可能已触发（比如必填字段为空），导致初始渲染就高亮；若想延迟到用户操作后，得配合 :user-invalid（仅 Chrome/Edge 支持，Firefox/Safari 无）或 JS 手动加 class。
- 避免用
:has(:focus)做交互反馈——它不等价于:focus-within，且焦点移入子元素时，父背景可能闪动（因重绘时机不稳定） - Safari 17.0–17.3 完全不支持
:has()，iOS 用户看不到效果；上线前务必检查 caniuse 数据 - 性能上，
:has()在复杂 DOM 中可能触发全局选择器重查，慎用于列表项超过 200 条的场景
替代方案：当 :has() 不可用时怎么兜底
如果要兼容 Safari 或旧版 Chrome，就得放弃纯 CSS 方案。最稳的是用 JS 监听子元素状态变化，再给父容器加 class：
document.querySelectorAll('input[data-validate]').forEach(input => {
const parent = input.closest('.form-group');
const update = () => parent.classList.toggle('has-error', !input.checkValidity());
input.addEventListener('input', update);
input.addEventListener('blur', update);
});
对应 CSS 写成：
.form-group.has-error { background-color: #fff2f2; }
- 别用 MutationObserver 监听 class 变化来触发
:has()—— 这属于绕弯子，既没收益又增复杂度 - 服务端渲染（SSR）页面中，若子元素初始状态由数据决定，JS 补充逻辑需在 hydration 后立即执行，否则首屏样式错乱
- 如果只是简单表单校验，
:focus-within+:valid/:invalid组合比硬上:has()更轻量、兼容性更好
容易被忽略的嵌套层级陷阱
:has() 查找的是任意后代，不是直系子元素。这意味着 .parent:has(.child) 会匹配 .parent > .wrapper > .child，也可能误伤无关分支。
如果你只想响应直接子元素的状态，必须显式限定层级：
.parent:has(> .child.active)
但注意：> 在 :has() 内部是合法的，而 +、~ 依然不被支持。
- 嵌套过深时（如
article:has(section > header > h2[aria-level="1"])），可读性和维护性骤降，建议拆成 JS 判断 - 使用 CSS 模块或 scoped style 时，
:has()里的类名必须是编译后的真实类名，不能写源码中的局部名（Vue SFC 的:deep()不作用于:has()内部） - PostCSS 插件（如
postcss-has-pseudo）无法真正 polyfill:has()，它只是删除规则或报错，别指望自动转译
:has() 是个好用但锋利的工具——用对了省事，用错了连调试都费劲。真要依赖它做核心交互，先确认目标用户浏览器版本，再留一手 JS 回退逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
