html - 在CSS上覆盖父样式

Question

我有以下场景。

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

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

然而，当我这样做时，A 中的所有图像都会获得相同的背景， 我试过这个但没成功

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

关于如何解决这个问题有什么想法吗？

更新

Fiddle

Answer 1

问题:

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

解决方案

• 在img中设置display:block

.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>