可用 article:has(img) a { text-decoration: none } 判断并样式化含 <img> 的文章中的链接；注意兼容性、背景图无效、空标签仍匹配，需服务端降级或 JS 补充控制。
如何用 :has() 判断文章是否含 <img>
浏览器原生支持 :has() 后，它就成了唯一能“父选择子”的 CSS 工具。但注意：:has() 不能写在媒体查询里，也不能嵌套另一个 :has()，更不能用于伪元素（比如 ::before）。
想让「含图片的文章」不带下划线，核心是：先选中文章容器（比如 <article> 或带 class 的 <div>），再用 :has(img) 筛出其中包含 <img> 的那些。
-
<article>必须是真实存在的父级容器，不能靠 JS 动态插入后才触发样式（CSS 不监听 DOM 变化） - 如果图片是通过
background-image加载的，:has(img)完全无效——它只认 HTML 元素，不认 CSS 属性 - 部分 CMS 会把图片包在
<figure>或<picture>里，这时得写成:has(img), :has(picture), :has(figure img)才保险
a 标签下划线控制必须作用于链接本身
很多人误以为给 <article> 加样式就能影响里面的 <a>，其实不行。CSS 里没有“反向继承”，你得明确告诉浏览器：当某个 <a> 处在满足 :has(img) 的父容器里时，取消它的下划线。
正确写法是把选择器写成：article:has(img) a，而不是 article:has(img) { text-decoration: none }（后者对子元素里的 a 没用）。
立即学习“前端免费学习笔记（深入）”；
- 如果文章结构是
<article><p><a href="#">链接</a></p><img src="..."></article>，那article:has(img) a就能命中 - 如果
<a>在<img>之前（比如标题链接），依然有效——:has()只看是否存在，不管顺序 - 若页面同时有多个
<a>（如导航、页脚），建议加更具体的类名限定范围，避免误杀
兼容性与降级必须手动处理
:has() 在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持，但旧版 Safari（尤其是 iOS 15.2–15.3）和所有 IE 完全不识别。它不会报错，但会整条规则静默失效。
这意味着：没加降级的话，老用户看到的全是带下划线的链接，而你预期的效果完全不出现。
- 最简降级方案：默认去掉所有
a下划线，再用:not(:has(img)) a单独给“不含图的文章”加上——这样即使:has()不支持，至少默认状态一致 - 不要依赖 JS 检测
:has()是否可用，因为 CSS 解析失败时 JS 无法感知；稳妥做法是服务端或构建时根据内容特征打 class - PostCSS 插件（如
postcss-has-pseudo）目前无法真正 polyfill:has()，只是删掉规则或报错，别信“自动转义”宣传
容易被忽略的细节：空 <img> 和懒加载
如果页面里有 <img src=""> 或 <img loading="lazy">，它们仍会被 :has(img) 匹配到——只要标签存在，不管有没有 src、有没有加载完成。
这会导致两类误判：一是占位图或 SVG 链接被错误排除下划线；二是图片还没加载完时，样式就已应用，后续加载不影响样式重算（CSS 不响应属性变化）。
- 想排除空
src的<img>？做不到。CSS 无法判断属性值，只能靠 JS 预处理或服务端过滤 - 如果业务要求“仅当图片真实可见时才去下划线”，那
:has()不适合，得换 IntersectionObserver + class 控制 - 用
<picture>或<svg>替代<img>的场景，记得同步更新:has()里的选择器
