Вот мой код:Почему граница не меняется при зависании?
<html>
<head>
<style type="text/css">
p:hover{border:2px solid red;}
</style>
</head>
<body>
<p style="border:2px solid green;">This is a paragraph.</p>
</body>
</html>
Я запутался: почему граница цвет не меняется на парения?
Встроенные стили имеют более высокий приоритет, чем любое правило CSS, которое не равно !important. Таким образом, решение, чтобы отметить атрибуты в p:hover правила, как важно:
p:hover {
border:2px solid red !important;
}
Другим вариантом было бы перемещать первоначальный стиль в <style> тег тоже.
p {
border: 2px solid green;
}
p:hover {
border: 2px solid red;
}
Here является TL; DR-стиль объяснение приоритетов CSS, и если вы предпочитаете что-то немного больше вы можете также посмотреть на relevant part of the CSS spec.
Встроенные стили имеют более высокий приоритет, чем отдельные секции CSS
EDIT: Вздох второй - только чуть-чуть слишком медленно.
Это должно работать - насколько я знаю, !important не считается хорошей практикой, так что я бы предложил использовать этот подход:
<style type="text/css">
p{border:2px solid green;}
p:hover{border:2px solid red;}
</style>
<body>
<p>foobar</p>
</body>
Если у вас есть доступ к CSS (скажем только, потому что другой отдел владеет HTML, или он вводится с помощью другого метода), вам нужно будет использовать !important. Использование !important абсолютно нормально, так как оно предназначалось для устранения подобных ситуаций. Идея о том, что это «плохая практика», неверна (если вы не используете ее, чтобы быть ленивой в отношении вашей специфики CSS).
p:hover{border:2px solid red !important}
<body>
<p style="border:2px solid green">foobar</p>
</body>
Браузеры не имеют встроенный декларации CSS для p:hover, как они делают для a:hover, a:active, a:visited и т.д; Таким образом, встроенный стиль в HTML является единственным стилем, который распознается во время выполнения. Если ... есть !important доступно, чтобы дать :hover стиль.
Вы действительно не должны использовать важные –
Возможно, он почему-то застрял с этим кодом HTML. В этом случае не было бы другого выбора, кроме как использовать '! Important'. – ThiefMaster
Действительно ли необходимо, чтобы 'p: hover' был объявлен _after_' p'? – drahnr