如何避免图片元素继承文本链接的CSS格式化样式

嗨，很高兴你已经搞定这个问题啦！我再把两种靠谱的解决方式理清楚，方便你或者其他遇到同样问题的朋友参考：

问题回顾 #

你给文本链接设置了一套完整的伪类样式，但页面里带链接的图片也继承了这些样式（比如背景色、字体加粗这些，完全不适合图片），试过border=0和给图片加.img类都没生效，最后通过把类应用到图片的容器元素，再结合:not选择器解决了问题。

具体解决方案 #

方案1：用:not选择器精准排除图片链接

直接修改你的全局链接样式，让样式只作用在不包含图片的链接上：

a:not(:has(img)):hover { 
  color: #000000; 
  background-color:#FFFF00; 
  font-weight: bold; 
  text-decoration: none; 
} 
a:not(:has(img)):active { 
  color: #000000; 
  background-color:#FFFFFF; 
  font-weight: bold; 
  text-decoration: none; 
} 
a:not(:has(img)):link { 
  color: #FFFF00; 
  font-weight: bold; 
  text-decoration: underline; 
} 
a:not(:has(img)):visited { 
  color: #000000; 
  background-color:#FFFFFF; 
  font-weight: bold; 
  text-decoration: none; 
}

这里:has(img)用来识别包裹了图片的<a>标签，not就把这类链接排除在外，样式自然就只作用在纯文本链接上了，不需要额外改HTML结构，非常省心。

方案2：给图片链接的<a>标签加类重置样式

如果你的浏览器兼容性要求比较高（比如不支持:has选择器），可以给包裹图片的<a>标签加个专属类，然后重置它的所有伪类样式：

<!-- HTML里给图片链接加类 -->
<a href="your-link-url" class="image-link">
  <img src="your-image-url" alt="图片描述">
</a>

/* 重置图片链接的所有伪类样式 */
.image-link:link,
.image-link:visited,
.image-link:hover,
.image-link:active {
  color: inherit;
  background-color: transparent;
  font-weight: normal;
  text-decoration: none;
}
/* 可选：去掉图片默认的链接边框 */
.image-link img {
  border: 0;
}

你之前给图片加.img类没用，是因为那些伪类样式本来就是作用在<a>标签上的，图片本身不会继承链接的伪类样式，问题根源在包裹图片的<a>标签，所以得把类加在<a>上才行~

内容的提问来源于stack exchange，提问作者AN ML