:has() 是目前唯一无需 js 或额外 class 即可让父容器根据是否包含 img 标签切换样式的纯 css 方案，但仅检测 dom 中是否存在 标签，不判断图片是否加载成功；:has(img:loaded) 尚无浏览器支持。
:has() 能直接让父容器（比如 .card）根据是否包含 img 标签切换样式，这是目前唯一不用 JS、不加额外 class 就能实现“有图用 flex，无图用 block”的纯 CSS 方案。
为什么不能用 :has(img:loaded) 判断图片是否加载成功
:has(img:loaded) 是草案里的伪类，截至 2026 年 8 月，Chrome、Firefox、Safari 全都不支持——写了就整条 CSS 规则失效。实际可用的只有 :has(img)，它只认 DOM 中有没有写 <img> 标签，不管 src 是空的、404 还是正在加载。所以：
-
.card:has(img)→ HTML 里写了<img>，哪怕src=""或路径错误也匹配 -
.card:not(:has(img))→ DOM 里压根没出现<img>标签 - 想区分“加载失败”，得靠 JS 监听
error事件并加 class（如.img-error），再写.card:has(.img-error)
:has() 和传统 class 切换方案的实际差异
不用 :has() 时，你得手动维护两类 class：.card 和 .card-no-image，后端或模板引擎必须判断是否有图才能输出对应 class；用了 :has() 后，HTML 可以完全静态，CSS 自动响应结构变化：
- 支持服务端渲染（SSR）场景：卡片数据来自 API，但无需在模板层做 if-else 分支
- 避免 class 名冲突或遗漏：比如忘记给某张卡片加
-no-image，样式就错乱 - 降级行为明确：
:has()不支持时，所有卡片走默认样式（可提前设好 fallback）
示例对比：
.card { display: block; border-top: 3px solid #7c93e9; }
.card:has(img) { display: flex; align-items: center; gap: 1rem; }
搭配响应式布局时的常见坑
:has() 本身不感知屏幕尺寸，但它可以和媒体查询嵌套使用——注意顺序和兼容性：
- 写法正确：
@media (min-width: 768px) { .card:has(img) { flex-direction: row; } } - 写法危险：
.card:has(img) @media (min-width: 768px) { ... }—— 语法非法，浏览器直接忽略整条规则 - 移动端慎用
aspect-ratio+:has()：部分旧版 Safari 对aspect-ratio支持弱，若卡片需保持宽高比，建议 fallback 用 padding-top 百分比技巧 - 性能无明显负担：现代浏览器对
:has()的计算已优化，但避免在超深嵌套结构（如div:has(div:has(div:has(...)))）中连用多层
真正容易被忽略的是：DOM 结构必须稳定。:has(img) 匹配的是当前时刻存在的节点，如果 JS 动态插入/移除 <img>，样式会实时更新——但如果你用 innerHTML 替换整个卡片内容，旧的 img 节点被销毁，新节点需要重新触发渲染，此时可能有瞬时样式错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
