现代浏览器可用 :has() 直接选含 <img> 的卡片，如 article.card:has(> img)；旧浏览器需 JS 检测并添加 has-img 类，注意图片加载状态、懒加载和动态插入场景。
用 :has() 选择器直接筛选含 <img> 的卡片
现代浏览器（Chrome 105+、Firefox 107+、Safari 15.4+）已支持 :has()，它是目前唯一能「向上选择」的 CSS 伪类，正好解决「选有图片的父容器」这类需求。
假设卡片结构是 <article class="card"><img src="..."><p>...</p></article>，直接写：
article.card:has(> img) {
border: 2px solid #007bff;
}
注意三点：
-
:has()内部用>可限定为直接子元素，避免误匹配嵌套在<div>里的图片 - 不加空格（如
:has(img)）会匹配任意后代，可能选中广告图或图标字体生成的伪图 - 若卡片内图片是通过
background-image设置的，:has()无法检测——它只认 HTML 元素，不读样式
兼容旧浏览器时，靠 JS 补充 class
IE 和老版 Chrome/Firefox 不支持 :has()，得退回到 JavaScript 检测 + 添加 class 的方案。核心逻辑是：遍历所有卡片，检查其内部是否有 <img> 且 src 非空、非占位符路径。
立即学习“前端免费学习笔记（深入）”；
示例脚本（放在 </body> 前）：
document.querySelectorAll('.card').forEach(card => {
const img = card.querySelector('img');
if (img && img.src && !img.src.includes('placeholder') && !img.src.includes('data:')) {
card.classList.add('has-img');
}
});
对应 CSS 就写：.card.has-img { ... }
容易漏掉的点：
-
img.complete === false或img.naturalWidth === 0表示图片加载失败，此时不该加has-img - 用
IntersectionObserver延迟检测懒加载图片，否则首屏外的卡片可能被跳过 - 服务端渲染（SSR）页面需在 hydration 后再运行该脚本，否则 class 会被水合覆盖
别用 [style*="background-image"] 碰运气
有人想用属性选择器捕获背景图卡片，比如 .card[style*="background-image"]，这不可靠：
- 内联样式不一定存在——背景图常写在外部 CSS 或通过 JS 动态设置
element.style.backgroundImage - 字符串匹配易误伤：
background-image: none、linear-gradient也会被匹配到 - CSS 自定义属性（
--bg-url）和@property完全无法触发该选择器
真要处理背景图场景，只能靠 JS 读取 getComputedStyle(card).backgroundImage，再正则判断是否为 url( 开头。
性能和可维护性提醒
:has() 在复杂 DOM 中可能触发重排，尤其当它出现在高频更新区域（如搜索结果列表）。如果卡片数量超 200 个，建议：
- 限制作用域，比如只对
.gallery .card:has(> img)这类带明确祖先的选择器使用 - 避免链式写法：
:has(img):has(.caption)比:has(img, .caption)多一次遍历 - 构建时用 PostCSS 插件（如
postcss-has-pseudo）自动降级为 JS 方案，而非手动维护两套逻辑
最麻烦的其实是动态插入的卡片——:has() 不会自动响应新节点，仍需 MutationObserver 或显式调用 element.matches(':has(img)') 判断。这点常被忽略。
