В CSS есть ли способ сохранить свойства наведения для ссылок после переопределения нормального состояния?

Question

У меня есть свойства по умолчанию, определенные для моих ссылок, например:

a{
    color: blue;
}
a:hover{
    color: red;
}

Проблема в том, что я теряю все свойства наведения, когда делаю что-то вроде этого:

#header a{
    color: gray;
}

Таким образом, чтобы сохранить работу hover, как я определил ее ранее в настройках по умолчанию, я должен был бы объявить это снова:

#header a:hover{
    color: red;
}

Есть ли способ сделать это без потери исходного определенного действия при наведении?

Answer 1

К сожалению, если вы хотите, чтобы он работал во всех браузерах, вам придется его переопределить.

a { color:blue; }
a:hover { color:red; }

#header a { color:grey; }
#header a:hover { color:red; }

Пример .

В качестве альтернативы вы можетеиспользовать !important.Обычно это признак того, что в вашем css происходит что-то странное, но, похоже, это единственная альтернатива дублированию вашего css.

a { color:blue; }
a:hover { color:red !important; }

#header a:hover { color:red; }

Пример .

Вы также можете использовать компилятор CSS, такой как sass или less , который позволит вам написать в поместье, где вы не дублируете усилия -но это выходит за рамки этого вопроса.

Answer 2

Один из способов сделать это - указать стиль по умолчанию как !important.

Использование !important обычно является верным признаком того, что ваш код может быть улучшен, однако в этом контексте и без переопределения стилей это кажется лучшим выбором (лучше всего я знаю прямо сейчас).

a:hover{
    color:blue !important;
}

Рабочий пример

Также обратите внимание, что если вы идете по пути использования определенного селектора, вы можете объединить оба селектора вместе, чтобы уменьшить дублирование кода.

a:hover, #header a:hover{ color: red;}

Answer 3

Вы перекрываете стили с помощью каскада. Помещение «#header a» придает этому стилю больший вес, чем первоначальному стилю. Вы можете перевесить это с! Важным (хотя я бы не рекомендовал это). Вот статья, которая объясняет эту концепцию .