html - 避免图像对象继承专用于文本格式化的样式

Question

这是我的第一篇文章:非常尴尬，我记得几年前找到了解决我自己问题的方法......但是，让我们开始吧。

我为我的文本元素设置了整个悬停/链接/事件 CSS

a:hover {
color: #000000;
background-color:#FFFF00;
font-weight: bold;
text-decoration: none;  
}

a:active {
color: #000000;
background-color:#FFFFFF;
font-weight: bold;
text-decoration: none;
}

a:link {
color: #FFFF00;
font-weight: bold;
text-decoration: underline; 
}

a:visited {
color: #000000;
background-color:#FFFFFF;
font-weight: bold;
text-decoration: none;
}  

问题是页面上的图像，带有自己的链接，也继承了上面的 css。 起初我认为设置值 border=0 会解决问题。我错了。 我只是在寻找最简单的方法来避免所有图像元素继承专用于链接文本格式的 css。

编辑:

我还尝试添加以下 css:

.img:active {
background-color: transparent;
}

.img:link {
background-color: transparent;
}

.img:hover {
background-color: transparent;
}

并将源代码中的图像元素与

class="img"

但是图像继续继承主要的 css 样式。

编辑 2:

@andrea-ligios 您关于将 .img 类应用于包含图像的元素的建议非常有效!我还实现了 :not 选择器。太感谢了。抱歉，这是我的第一篇文章，我忘记了插入整个源代码会更容易找到解决方案。

Answer 1

问题

the problem is that the images on the page, with they own links, also inherit the css above.

因此您的 HTML(您应该始终将其与 CSS 一起发布，以防止我们进行一些不必要的猜测工作)应该是这样的:

<a href="...">
   Some Text
</a>

<a href="...">
   <img src="..." />
</a>

对吗？

Then and associating the image elements in the source code with the

class="img"

你已经尝试过了

<a href="...">
   <img class="img" src="..." />
</a>

?如果是这样，它就无法工作，因为您正在为 <img> 分配一个类元素，与您要覆盖的规则无关，为 <a> 定义元素。

解决方案

只需应用 .img类到 <a>包含图像的元素:

<a class="img" href="...">
   <img src="..." />
</a>

自 class selectors have an higher specificity than element selectors , .img规则将覆盖 a规则。

也就是说，为什么不应用规则而不是覆盖它们，使用 :not selector ？

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