Проблема с псевдоклассами CSS

zodcyi · October 26, 2012

Добрый день! Есть следующий код:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
	<title>Псевдоклассы</title>
	<style>
		a:link {
			color: #0f0;
		}

		a:visited {
			background: #f00;
		}
	</style>
</head>
<body>
	<p>
		<a href="1.html">Первая ссылка</a><br/>
		<a href="2.html">Вторая ссылка</a><br/>
		<a href="3.html">Третья ссылка</a><br/>
		<a href="4.html">Четвертая ссылка</a><br/>
		<a href="5.html">Пятая ссылка</a>
	</p>
</body>
</html>

Открываю страницу в Chrome, перехожу по первым двум ссылкам. Все работает так, как указал в стилях - непосещенные ссылки зеленого цвета, посещенные красного.

Первая задача - установить псевдокласс

:hover

так, чтобы при наведении на посещенные и непосещенные ссылки, они отображались данным цветом:

#0ff

. Добавляю код в начало листа стилей:


...
        <style>
		a:hover {
			color: #0ff;
		}

		a:link {
			color: #0f0;
		}

		a:visited {
			color: #f00;
		}
	</style>
...

Открываю браузер, при наведении на посещенные и непосещенные ссылки их цвет не меняется. Переношу правило

a:hover {color: #0ff;}

в конец листа стилей:


...
        <style>
		a:link {
			color: #0f0;
		}

		a:visited {
			color: #f00;
		}
		a:hover {
			color: #0ff;
		}
	</style>
...

Открываю браузер, все работает. При наведении указателя мыши все ссылки окрашиваются в нужный цвет.

1) Первый вопрос - какое значение имеет место нахождения данного правила

a:hover {color: #0ff;}

в коде?

Следующая проблема.

Добавляю в исходный код 2 правила. Первое правило - чтобы при наведении указателя мыши на непосещенные ссылки, они окрашивались в оранжевый цвет. Второе правило - чтобы при наведении указателя мыши на посещенные ссылки, они окрашивались в черный цвет. Получается следующий код:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Псевдоклассы</title>
	<style>
		a:link {
			color: #0f0;
		}
		a:visited {
			color: #f00;
		}

		a:link:hover {
			color: orange;
		}

		a:visited:hover {
			color: #000;
		}
	</style>
</head>
<body>
	<p>
		<a href="1.html">Первая ссылка</a><br/>
		<a href="2.html">Вторая ссылка</a><br/>
		<a href="3.html">Третья ссылка</a><br/>
		<a href="4.html">Четвертая ссылка</a><br/>
		<a href="5.html">Пятая ссылка</a>
	</p>
</body>
</html>

Открываю браузер - все работает.

Далее добавляю правило, чтобы посещенные ссылки при наведении указателя мыши перечеркивались горизонтальной чертой:


a:visited:hover {text-decoration: line-through;}

.

Получается следующий код:


...
        <style>
		a:link {
			color: #0f0;
		}
		a:visited {
			color: #f00;
		}

		a:link:hover {
			color: orange;
		}

		a:visited:hover {
			color: #000;
			text-decoration: line-through;
		}
	</style>
...

Открываю браузер - добавленное правило игнорируется. При наведении мыши на посещенные ссылки свойство

text-decoration: line-through

не работает.

Далее переношу правило

text-decoration: line-through

из посещенных ссылок в непосещенные. То есть, получается следующий лист стилей:


...
         <style>

		a:link {
			color: #0f0;
		}
		a:visited {
			color: #f00;
		}

		a:link:hover {
			color: orange;
			text-decoration: line-through;
		}
		a:visited:hover {
			color: #000;

		}
	</style>
...

Открываю браузер - свойство

text-decoration: line-through

при наведении указателя мыши применяется для всех ссылок, хотя я указал только для непосещенных.

Помогите разобраться - что происходит с кодом? Спасибо.

mrnobody · October 26, 2012

Порядок псевдоклассов вроде такой:

:link
:visited
:focus
:hover
:active

SelenIT · October 26, 2012

1) Все псевдоклассы (как и классы) дают одинаковый вклад в специфичность. Поскольку наведенная ссылка одновременно является либо посещенной, либо нет, при перечислении псевдоклассов по отдельности к ней применяется какой-то один — тот, что идет последним. Чтобы все классы применялись, рекомендуют указывать их в последовательности link/visited/hover/(focus)/active (есть специальные запоминалки, типа «LoVe/HAte» или «Lord Vader Hates Furry Animals», лично я предпочитаю свою — «Links, even Visited, Have to be Fully Accessible».

2) Судя по всему, дело в ограничениях на стилизацию посещенных ссылок ради безопасности. До его введения через них можно было «выведать», какие страницы посещал юзер (напр., дергая шпионский скрипт через background-image для них). Поэтому современные браузеры (как минимум, Хром и ФФ) разрешают менять для посещенных ссылок лишь ограниченный набор свойств, не сказывающихся на отображении других элементов: color, background-color, border-*-color, outline-color, column-rule-color, fill и stroke (подробности со ссылками на англ.).

zodcyi · October 26, 2012

mrnobody, SelenIT - спасибо за помощь!

Sign In

Проблема с псевдоклассами CSS

Question

zodcyi

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

zodcyi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information