:has() 不能直接写成 :has(:checked) 就生效，因其为关系选择器，仅匹配包含符合条件子元素的父元素，且内部对动态伪类有支持限制；:checked 虽可用，但要求目标元素必须是父元素的后代或子元素，且 dom 结构真实存在。
为什么 :has 不能直接写成 :has(:checked) 就生效
因为 :has() 是关系选择器，它只匹配“包含符合条件子元素”的父元素，但浏览器对伪类的支持有严格限制——:has() 内部**不能使用某些动态伪类**（如 :focus-within 在部分旧版 Safari 中受限，:hover 在 :has() 中完全无效）。更关键的是：:checked 确实可用，但必须确保目标元素是该父元素的**后代或子元素**，且 DOM 结构真实存在。常见失效原因是：表单控件被 display: none 或 visibility: hidden 遮盖，或被移出文档流（如用 position: absolute + left: -9999px 但未保留在父容器内）。
- ✅ 正确结构：
<label><input type="checkbox">选项</label>，然后用label:has(input:checked) - ❌ 错误结构：把
input放在label外，或用for关联但不在同一父级下，:has()就找不到它 - ⚠️ 注意：Safari 15.4+、Chrome 105+、Firefox 117+ 才支持，旧版本会直接忽略整条规则
怎么让父容器响应子元素的 focus 状态
:has(:focus) 看似合理，但实际中容易踩坑：焦点元素若为 input、textarea 或带 tabindex 的元素，必须保证它没被 outline: none 彻底禁用（否则部分浏览器认为“未获得焦点”），且父元素不能设 overflow: hidden 并裁剪掉焦点框——这虽不影响焦点逻辑，但会让开发者误判状态未触发。
- 推荐写法：
div.form-group:has(input:focus)→ 给整个div加边框高亮 - 避免嵌套过深：
:has(div > span > input:focus)效能略低，优先用最简路径 - 注意兼容性：Firefox 直到 117 才支持
:focus在:has()中，此前会静默失败
用 :has 实现“无子项时隐藏父容器”
这是 :has() 最实用的场景之一，替代 JS 判断空状态。但要注意：空判断不是看文本内容，而是看是否存在**非空白文本节点或元素子节点**。连续空格、换行符会被忽略，但 或注释节点不算“内容”。
- 正确隐藏：
section:has(*)匹配“有任意子元素”的 section；反过来，section:not(:has(*))匹配空 section - ⚠️ 不要写
:has(text())—— CSS 里没有:has(text())这种语法，DOM 文本节点无法被 CSS 选择器直接匹配 - 如果子元素是 Vue/React 渲染的，需确认框架没插入空 comment 节点（如
<!--v-if-->），它们不影响:has(*)
为什么给 checkbox 切换时父元素动画不触发
因为 :has() 是纯 CSS 状态匹配，它不触发重排或重绘监听，也**不会自动触发动画的 transition 或 @keyframes**。你必须显式定义过渡属性，且目标属性得是可动画的（如 background-color、opacity、transform），不能是 display 或 height（除非用 max-height 巧妙模拟）。
- 可行示例：
label:has(input:checked) { background-color: #007bff; transition: background-color 0.2s ease; } - 不可行动画：
label:has(input:checked) { display: none; }——display不支持过渡 - 性能提示：频繁切换的
:has()规则（尤其含复杂后代选择器）可能影响渲染性能，生产环境建议用class控制代替
:has() 确实让父元素响应子状态变简单了，但它的边界很实在：依赖真实 DOM 结构、受浏览器版本硬约束、不解决动画触发逻辑本身——这些地方一疏忽，样式就静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
