мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Сложные селекторы с состояниями ссылок на CSS

Все сложные селекторы, которые мы изучали ранее, можно применять и для ссылок.

Давайте посмотрим на примере. Пусть наши ссылки находятся в блоке с заданным id:

<div id="block"> <a href="#">ссылка</a> <a href="#">ссылка</a> <a href="#">ссылка</a> </div>

Давайте зададим стили для ссылок из этого блока:

#block a:link, #block a:visited { color: red; } #block a:hover { text-decoration: none; }

Как правило, состояния link и visited не разделяют, поэтому код можно упростить следующим образом:

#block a { color: red; } #block a:hover { text-decoration: none; }

Ссылка с классом

Пусть теперь сами ссылки имеют класс:

<a href="#" class="eee">ссылка</a> <a href="#" class="eee">ссылка</a> <a href="#" class="eee">ссылка</a>

Давайте зададим стили для ссылок, имеющих такой класс:

a:link.eee, a:visited.eee { color: red; } a:hover.eee { text-decoration: none; }

Не имеет значения в каком порядке писать класс ссылки и псевдоклассы состояний. Можно переставить их местами и от этого ничего не изменится:

a.eee:link, a.eee:visited { color: red; } a.eee:hover { text-decoration: none; }

Практические задачи

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

a { color: red; } a:hover { text-decoration: none; }

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

a.zzz { color: red; } a.zzz:hover { text-decoration: none; }

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

a.zzz { color: red; } a.zzz:hover { text-decoration: none; }

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

#block a.zzz { color: red; } #block a.zzz:hover { text-decoration: none; }

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.block a.zzz { color: red; } .block a.zzz:hover { text-decoration: none; }