:has() 是解决“图片存在与否影响文字样式”问题的唯一纯 CSS 方案，它允许基于子元素是否存在直接驱动父容器样式，无需 JS 侵入 DOM，且支持优雅降级；:has(img) 仅检测 img 标签是否存在于 DOM 中，不判断加载状态，而 :has(img:loaded) 尚未被任何浏览器实现。
为什么 :has() 是解决“图片存在与否影响文字样式”问题的唯一纯 CSS 方案
传统方案（如 JS 监听 img 加载、用 loading="lazy" 配合 onload）必须侵入 DOM，且无法在 CSS 里响应式回退。而 :has() 允许你基于子元素是否存在或状态，直接驱动父容器（比如卡片）的样式——这正是「根据图片存在与否调整文字」的核心诉求。
注意：浏览器支持仍需检查。截至 2024 年中，Chrome 105+、Safari 15.4+、Firefox 121+ 原生支持；Edge 同 Chrome。不支持时，文字将保持默认样式（可视为优雅降级）。
:has(img) 和 :has(img:loaded) 的区别与实际效果
:has(img) 只检测 <img> 标签是否存在于 DOM 中，不管它是否加载成功、是否为空 src 或 404。只要 HTML 里写了 <img src="...">，哪怕 src 是无效路径，它也匹配。
:has(img:loaded) 是草案中的伪类，目前没有任何浏览器实现。别在生产环境写它，否则整条规则失效。
立即学习“前端免费学习笔记（深入）”；
所以真实可用的判断逻辑只有两个层级：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
.card:has(img)→ 有<img>标签（无论成败） -
.card:not(:has(img))→ DOM 中完全没写<img>
如果你需要区分「加载失败」，必须配合 JS 设置 class（例如 .img-error），再用 :has(.img-error) ——:has() 本身不感知网络状态。
卡片内文字偏移/显隐控制的典型写法
常见需求是：有图时文字左对齐、上边距小；无图时文字居中、增大上下间距以填补空白。关键在于把样式作用于文字容器（如 .card-content），而非文字本身。
.card {
padding: 1rem;
}
.card-content {
margin-top: 1.5rem;
text-align: center;
}
.card:has(img) .card-content {
margin-top: 0.5rem;
text-align: left;
}
要点：
- 务必把
:has()放在父选择器（如.card）上，再后代选中文字容器；不能写成.card-content:has(img)（语法错误，:has()不接受非祖先元素） - 避免用
display: none切换文字——会导致无障碍阅读器跳过内容。改用visibility: hidden+height: 0+overflow: hidden组合，或仅调整opacity和transform - 若卡片使用
flex布局，:has(img)触发后建议重设align-items，防止文字垂直位置突变
容易被忽略的 DOM 结构陷阱
:has() 匹配的是「当前选择器所指元素的后代或同级」，但只支持后代（ ）、子代（>）、相邻（+）、通用兄弟（~）四种关系。这意味着：
- 如果
<img>在卡片外部（比如被抽离到<aside>），.card:has(img)永远不生效 - 如果图片被包裹在
<figure>或<div class="image-wrapper">里，:has(img)依然有效（因为img是.card的后代） - 若卡片结构是
<article class="card"><header>...</header><main>...</main></article>，而img在<header>内，则.card:has(img)仍匹配 - 动态插入图片（如通过
innerHTML或框架v-if）后，:has()会立即响应；但 SSR 渲染时若图片标签被注释掉或条件编译剔除，则不匹配
最稳妥的做法：确保 <img> 是 .card 的直系或嵌套后代，且不依赖 JS 插入时机来触发样式切换。
