:has()可安全替换JS事件监听的场景限于存在性判断，如:focus、:invalid、:checked等伪类状态联动，但无法处理滚动位置、动态插入节点或像素级交互。
能替代，但只限于“状态存在性判断”类场景；一旦涉及像素位置、滚动方向、节流防抖或动态插入节点，JS 仍是唯一解。
哪些 JS 事件监听能被 :has() 安全替换
核心是看逻辑是否只依赖「某元素是否存在/是否满足某个伪类状态」，且该元素与目标样式节点有静态可触达的 DOM 关系（后代、子、相邻兄弟）。
-
focus/blur→ 用:has(input:focus)或更稳妥的:focus-within（:has()在此处无优势） -
input后校验状态 →:has(input:invalid:not(:placeholder-shown))比监听change+ 手动加 class 更可靠，尤其 SSR 首屏无 layout shift - 复选框联动 UI 开关 →
.group:has(input:checked) .control可直接控制兄弟/后代显隐，无需绑定change事件 - 滚动入视口（仅布尔态）→ 用
body:has(.section:is(:in-view))不行（:in-view非标准），但可用占位技巧：.section:has(+ .trigger)+ 底部一个height: 0; overflow: hidden;的.trigger元素
:has() 替换 scroll 监听时最容易踩的三个坑
很多人想用 :has() 完全干掉 IntersectionObserver，结果在 Safari 崩溃、在 Chrome 闪动、在 Firefox 失效——问题不在语法，而在对能力边界的误判。
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 浏览器不支持
:in-view，硬写:has(.target:in-view)会静默失败；必须用 DOM 位置模拟，比如在目标区域底部插入一个<span class="inview-trigger"></span>，再写.section:has(.inview-trigger) - Safari 15.4–16.3 对
:has(.x + .y)（相邻兄弟）有严重 bug，建议统一改用:has(> .y)或:has(.y)（后代） -
:has()不响应 JS 动态设置的checked或open属性——它只捕获用户原生交互（点击 checkbox、点击 details）；若你用el.checked = true，样式不会更新
为什么 body:has(.theme-red) 能跨区域生效，但不能替代 media query
因为 :has() 匹配的是 DOM 存在性，不是视口尺寸。它适合主题切换、错误提示插入、菜单展开等「内容驱动型响应」，但和媒体查询完全正交。
立即学习“Java免费学习笔记（深入）”；
-
body:has(.theme-red) .btn→ 红色主题激活时，所有.btn生效，无论它在 DOM 哪一层，只要能被body静态触达 - 但
@media (max-width: 768px)描述的是设备能力，:has()根本无法读取window.innerWidth或触发 resize 重算 - 性能上，
body:has(.x)会强制遍历整个文档树，若页面节点超 5000 个，首次匹配可能卡顿；应尽量缩小范围，比如用.sidebar:has(.ad-banner)替代body:has(.ad-banner)
最常被忽略的不是语法写错，而是 HTML 结构里多了一个换行或注释——它会让 :has(> .item:nth-child(3)) 失效，因为那个换行是 text node，.item 实际成了 :nth-child(4)。:has() 匹配的是真实 DOM 树，不是你写的缩进格式。
