CSS a.className :attr properties

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    

应该可以