:has() 不能用在所有地方，因其仅支持现代浏览器且受限于上下文——不可用于 @media/@supports、不可作为顶层选择器、不兼容 shadow dom 和旧版 safari，并禁止链式写法及伪元素匹配。
为什么 :has() 不能用在所有地方
:has() 是 CSS 级联选择器中唯一能“向上查找”的伪类，但它被限制在**支持它的现代浏览器中且仅适用于某些上下文**。最常被忽略的一点是：:has() 在 @media、@supports 或 CSS-in-JS 的动态规则里基本不可用；更关键的是，它**不能作为顶层样式规则的唯一选择器**（比如 :has(> .active) { } 会直接失效），必须依附于一个明确的祖先元素。
常见错误现象：div:has(.btn-primary) 看似合理，但若该 div 是文档根节点或被 Shadow DOM 隔离，就可能不生效；另外，Safari 15.4+ 才开始支持，旧版 iOS Safari 完全不识别。
- 只在 Chromium 105+、Firefox 121+、Safari 15.4+ 中可用，生产环境需检查 caniuse 数据
- 不能写成
:has(.x) .y这种“先 has 再选子元素”的链式写法——浏览器会拒绝解析整条规则 - 内部选择器不支持伪元素（如
:before）、:host或部分属性选择器（如[attr~="val"]）
:has() 的典型用法：表单校验与交互反馈
最常见的实用场景是“当某个子元素满足条件时，高亮整个父容器”，比如表单验证、折叠面板、卡片悬停反馈。这时要确保父元素有明确标签（如 form、details、article），而不是靠 div 堆砌。
例如，让包含错误输入的 form 整体加红边框：
form:has(input:invalid) {
border: 2px solid #e53e3e;
}
注意这里用了 input:invalid 而不是 .error 类——因为原生表单验证触发的 :invalid 是实时更新的，而 class 切换需要 JS 配合，:has() 对 class 变化响应及时，但对伪类状态依赖浏览器原生逻辑。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 优先用原生伪类（
:checked、:focus-within、:invalid）而非 class，减少 JS 干预 - 避免嵌套过深：
section:has(> ul > li:last-child a[href^="mailto"])不仅难维护，性能也差 - 不要指望它触发重排动画——
:has()匹配变化不会触发transition，需配合其他状态
和 :focus-within、:empty 的区别与取舍
:has() 常被拿来和 :focus-within 比较，但二者能力不重叠。:focus-within 只响应焦点事件，且不支持复杂条件（比如“有带 required 属性的 input”）；:empty 只判断是否无子节点，无法判断子节点类型或属性。
举个实际例子：你想让一个导航项在“当前页链接激活且不在移动端折叠状态”时显示下划线。用 :has() 可写为：
nav:has(a.active):not(.mobile-collapsed) {
--underline: 1;
}
而用 :focus-within 就做不到“判断是否有 .active”，用 :empty 更完全无关。
-
:focus-within性能更好，适合纯交互反馈；:has()更灵活，但浏览器需遍历子树，大量使用可能影响渲染帧率 -
:has(.x, .y)支持多条件“或”逻辑，但不支持“与”（不能写:has(.x .y)表示同时存在两个类的后代） - 若只需判断是否存在某类元素，
:has(*)比:has(div)更轻量，因不需匹配具体标签名
调试 :has() 失效的三个检查点
当你写的 :has() 规则没效果，别急着换 JS——先看这三处：
- 打开开发者工具的“Styles”面板，确认该规则是否被浏览器标为
invalid（通常因语法错误或不支持） - 检查父元素是否被
display: contents或contain: layout影响——这两者会让:has()无法正确感知子元素 - 运行
getComputedStyle(document.querySelector('your-selector')).cssText，看是否返回空字符串，如果是，说明选择器根本没匹配到任何元素（可能父元素不存在，或子条件太严格）
真正容易被忽略的是：CSS 选择器匹配发生在样式计算阶段，而 DOM 更新（比如 Vue 的响应式更新）可能异步，导致 :has() 短暂错过状态变化。这种情况下，宁可加一层 class 控制，也不要强行用 :has() 追求“纯 CSS”解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
