如何在现代CSS中使用:has伪类优化卡片图文混排布局-css教程-PHP中文网

直接写 .card:has(img) 即可匹配含标签的卡片，无需 JS 或额外 class；它仅依赖 DOM 结构存在性，不校验图片是否加载或有效，且比 .card:has(.card-image) 更兼容 Safari。

如何在现代css中使用:has伪类优化卡片图文混排布局

如何用 `:has()` 匹配“有图卡片”并切换整体布局

直接写 .card:has(img) 就能选中所有含标签的卡片，无需 JS 或额外 class。它只看 DOM 结构是否存在该标签，不关心 src 是否有效、是否加载完成——这点必须明确，否则你会误以为“图片 404 时样式没变”是 bug。

常见错误是把父选择器写得太宽，比如 div:has(img)，浏览器会遍历页面所有

，在长列表中滚动时明显卡顿。应限定为语义化容器：.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) 更稳妥
很多团队习惯给图片包一层 
，再写 .card:has(.card-image)。这看似清晰，但实际埋了兼容隐患：Safari 15.4–16.6 对嵌套层级较深的 :has() 解析不稳定，一旦结构变成 .card > .wrapper > .card-image，部分版本会静默忽略整条规则。而 :has(img) 是最原子的选择，只要 HTML 里写了 ，不管它嵌在哪层、有没有 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 写两套：

											
												
												
													CSS
													CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
												
												下载
												
											
										

支持 :has()：用 .card:has(img) { ... }

不支持时：用 .card[data-has-img] { ... }，确保视觉一致
避免用 JS 动态加 class，否则首屏渲染会闪动；data 属性应在 HTML 初始输出时就存在

滚动容器中用 :has() 检测溢出并加阴影
“内容超宽才显示右阴影”这类需求，过去得靠 JS 监听 scrollWidth > clientWidth，性能差还易漏事件。现在可用 :has() 配合一个微小宽度锚点：
在滚动容器内放一个 
，再写 .scroller:has(.scroller-anchor) { /* 加右侧渐变阴影到 ::after */ }。

必须用 100.1%，整数如 101% 在某些缩放比例下会被四舍五入回 100%，:has() 就不触发
锚点要放在滚动内容最末尾，否则可能被裁剪，导致匹配失败
这个技巧只适用于 overflow-x: auto 容器，overflow: hidden 下无效

真正难的不是写对 :has()，而是想清楚哪些逻辑必须交给 JS：比如加载状态、网络错误、动态插入节点后的样式响应——:has() 只认静态 DOM 结构，一动不动的 HTML 才是它最稳的搭档。