根本原因是浏览器不识别:has()语法，Safari 15.4前、Firefox 120及更早、Electron内核低于Chromium 105时整条规则被静默忽略，且.card:has(img)仅检测<img>标签存在性，无法响应加载失败状态。
为什么直接写 .card:has(img) .text { width: 100%; } 有时不生效
根本原因不是选择器写错了，而是浏览器根本不识别该规则——Safari 15.4 之前、Firefox 120 及更早、Electron 内核低于 Chromium 105 的环境里，:has() 会被静默忽略，DevTools Styles 面板里都看不到这条规则。更隐蔽的问题是：.card:has(img) 只检测 <img> 标签是否存在于 DOM 中，哪怕 src="" 或 src="404.jpg"，它也匹配。如果你实际想响应“图片加载失败”，:has() 本身做不到。
.card:has(img) 和 .card:not(:has(img)) 的真实适用场景
这两个组合是目前唯一稳定可用的判断逻辑，适用于纯结构层面的样式切换：
-
.card:has(img) .text→ 有<img>标签时，文字容器宽度收窄（比如设为width: 70%），留出图片空间 -
.card:not(:has(img)) .text→ DOM 中完全没写<img>时，文字撑满卡片（width: 100%），避免空白 - 注意：不要用
:has(img:loaded)——它尚未被任何浏览器实现，写了整条 CSS 规则会失效 - 如果需要区分“加载失败”，必须由 JS 主动添加 class（如
img.error），再写.card:has(.error)
文字宽度调整必须作用于容器，而不是文本节点本身
常见错误是直接给 <p> 或 <span> 设 width，但行内元素对 width 不响应。正确做法是把文字包在一个块级容器里（如 <div class="text">），再对这个容器设宽：
.card .text {
display: block;
}
.card:has(img) .text {
width: 65%;
}
.card:not(:has(img)) .text {
width: 100%;
}
另外，max-width 比 width 更安全，尤其在响应式布局中；若卡片本身用 flex 或 grid 布局，优先考虑 flex: 1 或 grid-column 控制占比，而非硬设像素或百分比。
立即学习“前端免费学习笔记（深入）”；
Safari 15.4–16.3 的兄弟选择器陷阱
如果你试图用 .card:has(img + .text) 这类带 + 的写法，在 Safari 15.4 到 16.3 之间大概率静默失效——它不报错，但样式就是不应用。稳妥方案是放弃兄弟关系依赖，回归最简结构：
- 确保
<img>和文字容器是同级子元素 - 用
.card:has(img) .text直接后代选择，兼容性最好 - 避免嵌套
:has()（如:has(:has(img))），所有浏览器都不支持 - 不要在
@media或@supports里包裹:has()规则，旧版 Safari 会直接跳过
真正容易被忽略的是 DOM 节点类型干扰：注释、空格文本节点会让 :nth-child() 类选择器偏移，但 :has(img) 不受此影响——只要 <img> 标签在 HTML 里，它就匹配，这点反而比计数类用法更鲁棒。
