Снимок экрана

Когда я пытаюсь использовать селектор непосредственно в пользовательском CSS

a:hover, a:focus, a:active !important {
    color: #fff;
}

Не работает, а некоторое время назад было (когда не было желтого цвета).

Это работает:

a {
    color: #fff;
}

Но что именно означает желтая подсветка и почему первая версия не работает?

P.s. И какой принцип использования Dev Tools должен был привести меня к версии a (нашел, попробовав)?

0
irvnriir 14 Июн 2020 в 13:53

1 ответ

Лучший ответ

Желтый цвет указывает на совпадение псевдокласса, как :hover в вашем случае.

Это выделение не зависит от вашей проблемы, связанной с несоответствием селектора.

Причина, по которой селектор не совпадает, заключается в том, что вы разместили там объявление !important. Хотя !important разрешен только для объявлений отдельных стилей , не в селекторах.

Использование !important в селекторе делает весь селектор недействительным.

Итак, правильный селектор в вашем случае - a:hover, a:focus, a:active.

Объясняющий намек, который предоставляет Firefox DevTools относительно неправильных селекторов CSS (начиная с Firefox 77), представляет собой предупреждение «Висящий комбинатор. Набор правил игнорируется из-за неправильного селектора» в Console , когда у вас есть CSS фильтр включен:

Warning for incorrect CSS selector in Console

Еще одно указание на то, что правила CSS с недопустимыми селекторами не отображаются на панели Правила .

Расширенная справка может отображать ошибки и предупреждения CSS в редакторе стилей , как указано в ошибка 1171873.

0
Sebastian Zartner 14 Июн 2020 в 13:53