:has()虽为唯一原生css方案但兼容性差，firefox默认关闭、x5内核及旧版chrome等广泛不支持，且无法响应异步加载变化；推荐后端输出语义class或mutationobserver监听加class。
:has() 是唯一原生 CSS 方式，但它在多数真实项目中不可靠——不是语法不会写，而是浏览器根本不认。
为什么 :has(img) 大概率不生效
Chrome 105+、Edge 105+、Safari 15.4+ 支持，但 Firefox 默认关闭（需手动开启 layout.css.has-selector.enabled），微信 X5 内核、旧版 Chrome（如 80–95）、企业内网常用 WebView 基本全不支持。写上 .card:has(img)，在这些环境里等于没写，且无报错、无降级提示。
- CanIUse 标的 “85% 全球支持” 是加权平均值，B 端系统、银行后台、Kiosk 设备实际覆盖率常低于 40%
-
:has()在媒体查询里可能被整块忽略（某些 Safari 版本） - 嵌套过深（如
:has(div > ul > li > img)）会明显拖慢重排，DevTools 可测出多出 3–5ms
真正能落地的替代方案
别赌浏览器兼容性，用确定性更强的手段：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 后端直接输出语义 class：
<div class="card card--has-img"> —— 零 JS、零兼容风险、服务端可控 <li>MutationObserver 监听 <code>img加载或插入：observer.observe(container, { childList: true })，加载完成再加 class - 图片加载失败时也需覆盖：
img.onerror = () => container.classList.add('card--has-broken-img') - 避免用 JS 频繁 toggle class 触发重排；批量操作用
classList.replace()或一次性 set - 用直接子代：
.card:has(> img)，不用.card:has(.img-wrapper img) - 不和
:not()嵌套：:has(:not(.hidden))在部分 Safari 下失效 - 避免伪元素：
:has(::before)不合法，:has(img::after)无效 - 属性判断比 class 更容错：
.card:has(img[src])比.card:has(img.loaded)更贴近真实场景
如果非要试 :has()，怎么写才不容易翻车
只在明确锁定现代桌面环境（如内部数据看板）时用，并遵守三原则：
最常被忽略的一点：哪怕 :has() 语法全对、浏览器也支持，它也无法响应图片异步加载完成后的状态变化——img 是后来 JS 插入或懒加载进来的，:has() 不会重新计算。这时候 class + MutationObserver 才是真解法。
