CSS a.className: свойства attr

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 получает цвет фона при наведении.

Я добавил 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;
}