现代浏览器可用 :has() 直接选含 的卡片，如 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> 里的图片 <li>不加空格（如 <code>:has(img)）会匹配任意后代，可能选中广告图或图标字体生成的伪图 - 若卡片内图片是通过
background-image设置的，:has()无法检测——它只认 HTML 元素，不读样式
兼容旧浏览器时，靠 JS 补充 class
IE 和老版 Chrome/Firefox 不支持 :has()，得退回到 JavaScript 检测 + 添加 class 的方案。核心逻辑是：遍历所有卡片，检查其内部是否有 <img> 且 src 非空、非占位符路径。
示例脚本（放在
