Question

我有以下html标记：

<span class="content_right_img">
 <a href="url" class="pic_link"><img src="lnk.gif" alt="alt" /></a>
</span>
<p>blah blah blah <a href="url">link text</a> more blah blah blah</p>

以及以下CSS规则：

#mainContent a:link {
text-decoration: none;
color: black;
border-bottom: 2.5px solid #FF0;
}
#mainContent a:visited {
text-decoration: none;
color: black;
border-bottom: 2.5px solid #FF0;
}
#mainContent a:hover {
text-decoration: none;
color: black;
background-color: yellow;
}
.content_right_img {
float: right;
padding: 5px 0 5px 10px;
border: none;
text-decoration: none;
}

客户希望链接使用黄色下划线“突出显示”，这在文本链接上正常工作。但是，我们不希望链接内部的图像也具有border-bottom属性。目前在FF中有一个下划线但没有Safari（没有看过IE）和下面的区域img在悬停时会收到背景颜色。

我在a标签中添加了class =“pic_link”，试图编写一组单独的href规则，但没有成功。

我试过了：

.className
a.className
.className:link
a.className:link

但没有运气。将css属性分配给href的不同类的正确方法是什么？还有更好的办法吗？

感谢您的帮助。

Answer 1

a.className:link
a.className:visited
a.className:hover
a.className:active

应该有效

Answer 2

将图像放入链接时。你应该设置border="0"


<span class="content_right_img">
   <a href="url" class="pic_link">
       <img src="lnk.gif" border="0" alt="alt" />
   </a>
</span>

Answer 3

试试这个选择器：

#mainContent a.pic_link:link,
#mainContent a.pic_link:visited,
#mainContent a.pic_link:hover {
    border-bottom-width: 0;
}

CSS a.className：attr属性

3 个答案: