直接写 .card:has(img) 即可匹配含 标签的卡片，无需 JS 或额外 class；它仅依赖 DOM 结构存在性，不校验图片是否加载或有效，且比 .card:has(.card-image) 更兼容 Safari。
如何用 :has() 匹配“有图卡片”并切换整体布局
直接写 .card:has(img) 就能选中所有含 <img alt="如何在现代CSS中使用:has伪类优化卡片图文混排布局" > 标签的卡片，无需 JS 或额外 class。它只看 DOM 结构是否存在该标签，不关心 src 是否有效、是否加载完成——这点必须明确，否则你会误以为“图片 404 时样式没变”是 bug。
常见错误是把父选择器写得太宽，比如 div:has(img)，浏览器会遍历页面所有 <div>，在长列表中滚动时明显卡顿。应限定为语义化容器：<code>.card:has(img) 或 article:has(.card__media img)。
- 有图时推荐设
display: flex+flex-direction: column（图片在上）或row（图片在左） - 无图时用
.card:not(:has(img))单独控制：居中文字、加占位图标、边框设为border: 1px dashed #ccc - 注意
:has()不触发重排，若改了background或padding却没效果，大概率是子元素溢出遮盖了——加position: relative或用::before/::after叠加层更可靠
为什么 :has(img) 比 :has(.card-image) 更稳妥
很多团队习惯给图片包一层 <div class="card-image">，再写 <code>.card:has(.card-image)。这看似清晰，但实际埋了兼容隐患：Safari 15.4–16.6 对嵌套层级较深的 :has() 解析不稳定，一旦结构变成 .card > .wrapper > .card-image，部分版本会静默忽略整条规则。
而 :has(img) 是最原子的选择，只要 HTML 里写了 <img alt="如何在现代CSS中使用:has伪类优化卡片图文混排布局" >，不管它嵌在哪层、有没有 class、src 是空还是乱码，都能命中。这是目前最健壮的写法。
立即学习“前端免费学习笔记（深入）”；
- 如果需要区分“加载失败”，必须配合 JS：监听
img.onerror后加class="img-error"，再用.card:has(.img-error) -
:has(img:loaded)纯属草案，2026 年仍无任何浏览器实现，写了等于废掉整条 CSS 规则 - 别在
:has()里混用~或+兄弟选择器，它们在 Safari 中降级行为不一致，容易导致样式断层
用 @supports selector(:has(*)) 做安全兜底
不能只靠 :has()，必须加特性检测。关键点在于：括号里必须写 :has(*)，不能简写成 :has()——后者会让 Safari 误判为不支持，直接跳过整个 @supports 块。
兜底方案不是“什么都不做”，而是用 data 属性提前注入状态。服务端或构建时扫描 HTML，给含图卡片加 data-has-img，CSS 写两套：
- 支持
:has()：用.card:has(img) { ... } - 不支持时：用
.card[data-has-img] { ... }，确保视觉一致 - 避免用 JS 动态加 class，否则首屏渲染会闪动；data 属性应在 HTML 初始输出时就存在
滚动容器中用 :has() 检测溢出并加阴影
“内容超宽才显示右阴影”这类需求，过去得靠 JS 监听 scrollWidth > clientWidth，性能差还易漏事件。现在可用 :has() 配合一个微小宽度锚点：
在滚动容器内放一个 <div class="scroller-anchor" style="width: 100.1%;"></div>，再写 .scroller:has(.scroller-anchor) { /* 加右侧渐变阴影到 ::after */ }。
- 必须用
100.1%，整数如101%在某些缩放比例下会被四舍五入回100%，:has()就不触发 - 锚点要放在滚动内容最末尾，否则可能被裁剪，导致匹配失败
- 这个技巧只适用于
overflow-x: auto容器，overflow: hidden下无效
真正难的不是写对 :has()，而是想清楚哪些逻辑必须交给 JS：比如加载状态、网络错误、动态插入节点后的样式响应——:has() 只认静态 DOM 结构，一动不动的 HTML 才是它最稳的搭档。
