:has(img[src*="banner"])常不生效，因需确保图片是父元素后代、仅用空格后代选择符（禁用>、+、~），且src值需匹配实际路径（如/banners/更稳）；safari对复合条件解析保守，动态插入图片亦不触发，推荐用data属性替代src匹配，并以js检测+class降级兜底。
为什么直接写 :has(img[src*="banner"]) 常常不生效
浏览器对 :has() 的支持虽已落地（Chrome 105+、Safari 15.4+、Firefox 121+），但它有严格限制：不能出现在样式表的「复杂选择器左侧」，也不能和伪元素、某些组合符混用。更关键的是，:has() **只匹配祖先元素，不匹配自身或兄弟**——所以你得确保图片是卡片的后代，且选择器层级正确。
常见失效场景包括：.card:has(> img[src$=".webp"])（用了子代选择符 >，但 :has() 内部不支持）；或者把 :has() 放在媒体查询里未加 @supports 检测。
- 必须用后代选择符（空格），不能用
>、+、~ -
src属性值需考虑 URL 编码或路径差异，比如src="/img/hero.png"和src="https://cdn/hero.png"不会同时命中[src*="hero"] - 若图片是通过 JS 动态插入或
loading="lazy"导致初始 DOM 中无img，:has()无法响应后续变化
怎么精准匹配带特定关键词的图片并加边框
用属性选择器配合 :has() 是最稳妥的方式，重点在「关键词选得够唯一、又不过于脆弱」。比如用 data-type="promo" 比依赖 src 更可控；若必须用 src，优先用 [src$=".jpg"]（后缀）或 [src*="/banners/"]（路径片段），避免匹配到头像或图标。
/* ✅ 推荐：匹配 src 包含 /banners/ 路径的卡片 */
.card:has(img[src*="/banners/"]) {
border: 2px solid #ff6b6b;
border-radius: 8px;
}
<p>/<em> ✅ 更健壮：用自定义 data 属性 </em>/
.card:has(img[data-role="hero-banner"]) {
border: 2px dashed #4ecdc4;
}</p><p>/<em> ❌ 避免：src 值含查询参数时容易断裂 </em>/
.card:has(img[src<em>="v=2"]) /</em> 可能漏掉 v=3 或无版本号的情况 */</p>
遇到 Safari 下边框不显示？检查这三点
Safari 对 :has() 的解析更保守，尤其在复合条件或嵌套较深时容易静默失败。
- 确认没有在
:has()内使用:hover、:focus等交互伪类（Safari 目前不支持） - 避免链式写法如
.card:has(img):has(.meta)—— Safari 只支持单个:has()表达式 - 如果卡片用了
contain: layout或content-visibility: auto，可能阻断:has()的计算，临时移除测试
快速验证是否生效：打开 DevTools，在 Elements 面板中右键卡片元素 → “Force element state” → 勾选 :has()（Chrome）或手动在控制台运行 $0.matches(':has(img[src*="banners"])') 看返回值。
要不要 fallback？JS 检测比 CSS @supports 更可靠
@supports selector(:has(...)) 在旧版 Safari 和 Firefox 中可能误报支持，导致样式未加载。真正安全的降级方式是用 JS 主动判断并打标记：
if (CSS.supports('selector(:has(img[src*="banners"]))')) {
document.documentElement.classList.add('has-has');
} else {
// 遍历所有 .card，检查内部是否有匹配的 img，手动加 class
document.querySelectorAll('.card').forEach(card => {
if (card.querySelector('img[src*="banners"]')) {
card.classList.add('has-banner-img');
}
});
}
然后分别写两套规则：.has-has .card:has(...) 和 .has-banner-img。否则，仅靠 CSS fallback 容易在边界版本中既不触发 :has()，也不走降级逻辑。
真正麻烦的不是写法，而是图片 URL 的不确定性——CDN 域名、尺寸后缀、懒加载占位图，都可能让 src 匹配落空。用 data- 属性标记语义，比字符串匹配靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
