在CSS上覆盖父样式

Question

我有以下情况。

我需要自定义网站上的所有链接以具有橙色背景。

.have-all-links-orange a{
    background-color: #F59522;
}

但是，当我这样做时，A内的所有图像都具有相同的背景，因此我尝试了此操作，但没有成功

.have-all-links-orange a img{
    background-color: transparent;
}

关于如何解决此问题的任何想法？

更新

小提琴

Answer 1

问题：

因为img在默认情况下是一个内联元素，所以会创建一个间隙，并且默认情况下具有vertical-align:baseline 。

解

• 设置display:block in img

 .have-all-links-orange a { background-color: #F59522; } .have-all-links-orange a img { background-color: transparent; display: block } 

 <div class="have-all-links-orange"> <a href="www.google.com"> <img src="https://www.google.com.pe/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> <br /> <a href="http://www.google.com">click here<a> <div> 

Answer 2

使图像成为块元素。

.have-all-links-orange a img {
    display: block;
     background-color: transparent;/**You don't need this**/
}

Answer 3

你可以这样做

.have-all-links-orange a img {
  background-color: transparent;
  display: block;
}

这是一个分叉的小提琴

如何在div的背景图片上获取锚标记？

Answer 4

嗯..也许是这样吗？ 您确实说过“所有具有Oragne背景的链接”。

a {
 background-color: #F59522;
}   

Answer 5

如果必须将图像显示在其他显示器上，则可以始终使用jquery消除颜色：

https://jsfiddle.net/616d530s/2/

$('.have-all-links-orange a img').closest('a').css('background', 'transparent');