修复超链接图片：避免其继承超链接样式的方法

嘿，我懂你遇到的这个烦人的问题——给普通文本超链接加了底部绿边框，结果连包裹图片的超链接也带上了这条线，看起来特别奇怪对吧？

先看看你现有的超链接样式（应该是类似这样的）：

/**** HYPERLINK STYLING ******/ 
a, a:visited, a:focus { 
  text-decoration:none; 
  border-bottom: 2px solid #8dc635; 
  box-shadow: inset 0 -4px 0 #8dc635; /* 假设你的完整box-shadow是这样 */
}

问题出在所有<a>标签都继承了这个边框和阴影样式，包括包裹图片的那些。下面给你几个简单的解决办法：

方法1：用:has()选择器（现代浏览器推荐） #

这是最简洁的方式，直接选中包含<img>的超链接，重置样式：

/* 移除包含图片的超链接的边框和阴影 */
a:has(img), 
a:has(img):visited, 
a:has(img):focus {
  border-bottom: none;
  box-shadow: none;
}

注意：:has()选择器在Chrome 105+、Firefox 121+、Safari 15.4+都支持，如果需要兼容更老的浏览器，试试下面的方法。

方法2：给图片链接加专属类名 #

给包裹图片的<a>标签加个类，比如image-link：

<a href="your-link-url" class="image-link">
  <img src="your-image-url" alt="描述文本">
</a>

然后在CSS里针对这个类重置样式：

a.image-link, 
a.image-link:visited, 
a.image-link:focus {
  border-bottom: none;
  box-shadow: none;
}

这个方法兼容性拉满，所有浏览器都支持。

方法3：用属性选择器（适合链接指向图片文件的场景） #

如果你的超链接是直接指向图片文件的（比如.jpg/.png/.gif），可以用属性选择器匹配这些链接：

a[href$=".jpg"], 
a[href$=".png"], 
a[href$=".gif"],
a[href$=".jpg"]:visited, 
a[href$=".png"]:visited, 
a[href$=".gif"]:visited,
a[href$=".jpg"]:focus, 
a[href$=".png"]:focus, 
a[href$=".gif"]:focus {
  border-bottom: none;
  box-shadow: none;
}

不过这个方法局限性比较大，只适合链接目标是图片文件的情况。

选个适合你项目的方法试试，这样图片超链接就不会再带着那条绿线啦！

内容的提问来源于stack exchange，提问作者Jenny R. Smith