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;
}

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

问题

问题是页面上的图片，带有自己的链接 ，也会继承上面的css。

所以你的HTML（你应该总是发布你的CSS，以防止我们做一些不必要的猜测工作）应该是这样的：

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

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

正确？

然后将源代码中的图像元素 与
相关联
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;
}

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

1 个答案:

问题

解决方案