Пример кода: http://jsfiddle.net/RuQNP/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style type="text/css">
a:link, a:visited {
color: blue;
}
a:hover, a:active {
color: red;
}
.foo a:link, .foo a:visited {
color: green;
}
/* A possible fix */
/*
.foo a:hover, .foo a:active {
color: red;
}
*/
</style>
</head>
<body>
<div class="foo">
<a href="#" onclick="location.href='http://example.com/'; return false;">Example</a>
</div>
</body>
</html>
Что я ожидал:
Ссылка будет отображаться красным при наведении.
Что я получаю:
Ссылка отображается зеленым при наведении.
Вопросы:
- Почему
color
, определенный в.foo a:link, .foo a:visited
селектор переопределяет значение вa:hover, a:active
? Что происходит? - Я понимаю, что могу исправить это и получить то, что ожидаю, раскомментируя
прокомментированный код. Однако я хочу знать, как мы можем исправить
.foo a:link, .foo a:visited
, чтобы он не переопределитьcolor
, определенный вa:hover, a:active
?
Если я правильно понимаю http://www.w3.org/TR/CSS21/cascade.html#specificity (спасибо, BoltClock), это таблица спецификаций для различных селекторов в коде.
a:link - 0 0 1 1
a:visited - 0 0 1 1
a:hover - 0 0 1 1
a:active - 0 0 1 1
.foo a:link - 0 0 2 1
.foo a:visited - 0 0 2 1
Таким образом, стиль, определенный для .foo a:link
, переопределяет стиль для a:hover
, когда как link
, так и hover
псевдоклассы применяются к элементу класса класса foo
.
Аналогично, стиль, определенный для .foo a:visited
, переопределяет стиль для a:hover
, когда как visited
, так и hover
псевдоклассы применяются к элементу класса класса foo
.