可用 article:has(img) a { text-decoration: none } 判断并样式化含 的文章中的链接；注意兼容性、背景图无效、空标签仍匹配，需服务端降级或 JS 补充控制。
如何用 :has() 判断文章是否含 <img alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" >
浏览器原生支持 :has() 后，它就成了唯一能“父选择子”的 CSS 工具。但注意：:has() 不能写在媒体查询里，也不能嵌套另一个 :has()，更不能用于伪元素（比如 ::before）。
想让「含图片的文章」不带下划线，核心是：先选中文章容器（比如 <article></article> 或带 class 的 <div>），再用 <code>:has(img) 筛出其中包含 <img alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" > 的那些。
-
<article></article>必须是真实存在的父级容器，不能靠 JS 动态插入后才触发样式（CSS 不监听 DOM 变化） - 如果图片是通过
background-image加载的，:has(img)完全无效——它只认 HTML 元素，不认 CSS 属性 - 部分 CMS 会把图片包在
<figure></figure>或<picture></picture>里，这时得写成:has(img), :has(picture), :has(figure img)才保险
a 标签下划线控制必须作用于链接本身
很多人误以为给 <article></article> 加样式就能影响里面的 <a></a>，其实不行。CSS 里没有“反向继承”，你得明确告诉浏览器：当某个 <a></a> 处在满足 :has(img) 的父容器里时，取消它的下划线。
正确写法是把选择器写成：article:has(img) a，而不是 article:has(img) { text-decoration: none }（后者对子元素里的 a 没用）。
立即学习“前端免费学习笔记（深入）”；
- 如果文章结构是
<article><p><a href="#">链接</a></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <img src="..." alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" ></article>，那article:has(img) a就能命中 - 如果
<a></a>在<img alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" >之前（比如标题链接），依然有效——:has()只看是否存在，不管顺序 - 若页面同时有多个
<a></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 alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" > 和懒加载
如果页面里有 <img src="" alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" > 或 <img loading="lazy" alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" >，它们仍会被 :has(img) 匹配到——只要标签存在，不管有没有 src、有没有加载完成。
这会导致两类误判：一是占位图或 SVG 链接被错误排除下划线；二是图片还没加载完时，样式就已应用，后续加载不影响样式重算（CSS 不响应属性变化）。
- 想排除空
src的<img alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" >？做不到。CSS 无法判断属性值，只能靠 JS 预处理或服务端过滤 - 如果业务要求“仅当图片真实可见时才去下划线”，那
:has()不适合，得换 IntersectionObserver + class 控制 - 用
<picture></picture>或<svg></svg>替代<img alt="CSS如何利用:has伪类制作只有含有图片的文章不带下划线" >的场景，记得同步更新:has()里的选择器
