рассмотрите эти стили:
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
И теперь эта разметка:
<a href="#">Normal link</a>
<a href="#" id="special">Special link</a>
Я ожидаю, что "специальная" ссылка будет розовой, сохранив другие цвета. Однако розовый заменяет другие цвета.
Почему это происходит? Как я могу это исправить? Спасибо.
Я считаю, что это связано с CSS приоритетом.
Поскольку #special - это идентификатор, он затмевает любой применяемый стиль на уровне элемента. (Это можно проверить в Firefox Firebug/Chrome Inspector и как унаследованные таблицы стилей полностью написаны стилем ID).
Хотя, учитывая, что нет "настоящего стиля", применяемого для: active,: visited и т.д. Было бы разумно, что эти стили все равно будут не затронуты. Тем не менее, внесение следующего изменения в ваш наведение, кажется, оттолкнуть его обратно на передачу:
a:hover { color: green !important; }
Почему это происходит?
Стили для псевдокласса :link применяются ко всем состояниям ссылок, поэтому он включает в себя :hover, :visited и :active
Это то, что я наблюдал с тех пор, как начал использовать CSS несколько лет назад. Я не знаю, как это работает, но я видел, как он работал и ожидал, что он сработает.
Итак, когда вы устанавливаете стиль для #special:link, этот стиль также применяется к #special:hover, #special:visited и #special:active
Обратите внимание, что использование идентификатора здесь не сильно меняется.
Если вы попробуете его с помощью CSS ниже, у вас будут две ссылки розовые... даже для :hover state
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
Как я могу его исправить?
Вы можете использовать !important, как было предложено Брэдом, или установить стили разных состояний для #special вместе с регулярными ссылками.
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
Его отягчающие... и порядок имеют значение здесь:
a:hover{
color:green;
}
a:visited{
color:red;
}
Это означает, что невидимые ссылки станут зелеными, когда вы наведите курсор мыши на них, а посещаемые ссылки останутся красными, когда вы на них наведите указатель.
Переключатель:
a:visited{
color:red;
}
a:hover{
color:green;
}
Это означает, что и посещаемые ссылки, и невидимые ссылки станут зелеными, когда вы наведете их. Я ненавижу, что порядок этих свойств изменяет поведение; стиль зависания должен действовать независимо.
a:link{
color:blue;
}
a.one:hover{
color:green;
}
a.one:visited{
color:red;
}
a.two:visited{
color:red;
}
a.two:hover{
color:green;
}<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>Вот еще один быстрый способ:
Вы можете использовать :not(:hover).
#special:link:not(:hover) { color: pink }
Нет, он не будет использовать другие цвета из-за своего идентификатора, в таком случае вы должны добавить остальные действия и цвета в ID.
Например, ссылка, которую у вас есть, "специальная", когда будет сказано.
Хорошо, я 'a'... link... и мой идентификатор... специальный, поэтому я сохраню специальные параметры.
Вот почему это не изменится.
Надеюсь, что это поможет,