Сложные селекторы с состояниями ссылок на 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;
}

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

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

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