В предыдущей секции мы рассмотрели способ стилевого оформления различных селекторов элемента a, но что делать в том случае, если разные ссылки в одном и том же документе должны выглядеть по-разному? Например, ссылки на панели навигации должны отображаться без подчеркивания, но ссылки в тексте должны быть легко распознаваемы. Или же фон одной части документа темнее, чем фон другой, и здесь ссылки должны быть светлее.

Решение
Попробуем создать различные стили для ссылок на примере, в котором мы уже определили один обычный стиль для них:

a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}

Данные правила будут использоваться по умолчанию – они описывают стиль отображения обычных ссылок в вашем документе. Первое правило задает синий цвет ссылок, поэтому, если часть страницы будет залита синим фоном, их будет не видно. Следовательно, необходимо создать второй набор стилей, который будет применяться к ссылкам, расположенным в данной области.

Прежде всего, создадим class или id для элемента, в котором будут размещаться ссылки другого цвета. Если стиль контейнера уже задан средствами CSS, у него наверняка есть атрибут class или id, который мы можем использовать для выполнения поставленной задачи. Допустим, документ содержит следующую разметку:

<div class="boxout">
<p>Скачать файлы на  <a href="store.html">странице закачек</a>.</p>
</div>

Создадим правило стиля, применимое по отношению ко всем ссылкам внутри элемента класса boxout:

.boxout {
color: #FFFFFF;
background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
text-decoration: underline;
color: #E4E2F6;
background-color: transparent;
}
.boxout a:hover, .boxout a:active {
background-color: #C9C3ED;
color: #191970;
}

Как видно на рис. 2.9, теперь все ссылки в документе будут отображены в соответствии с первым правилом, за исключением ссылок, размещенных внутри элемента div класса boxout – цвет текста последних будет более светлым.

Рис. 2.9. Использование двух различных стилей ссылок в одном документе