Переопределение CSS Hover Colors и! Важно

Question

Я работаю в WordPress, и у меня есть одна часть сайта, окрашенная и оформленная как обычно, но есть вторичная часть сайта, окрашенная в более темные стили. Я смог отделить два CSS в основном с использованием классов и! Важным. У меня есть проблема в области меню.

В большинстве сайта я следующее при наведении курсора на меню:

.header-menu li:hover, a:hover { 
background-color: #b89230 !important; 
color:#fff4d6; 
text-decoration: none !important; 

А на какую часть сайта у меня есть:

.page-template-cryptofact-page-php .header-menu li:hover, a:hover { 
background-color: #836F38; 
} 

Как написано выше, .page-template css берет на себя цвет фонового цвета на остальной части сайта. Если я важна css шаблона страницы, тогда остальная часть сайта вместо этого использует эффект окраски, независимо от собственного! Важного стиля.

Я попытался удаления! Важный постскриптум от обоих, замена либо один, а добавление его как и я до сих пор не могу заставить их действовать по своему усмотрению. Я надеялся, что обозначить .page-template-cryptofact-page-php будет достаточно, так как это кажется достаточным для всего остального стиля.

Когда я открываю для проверки элемент в источнике, любое из меню .header или .page-template-etc имеет серый цвет, оставляя a: hover как инициатор любой проблемы.

Я довольно новичок в нюансах CSS, поэтому, если кто-то может объяснить, почему это происходит, я был бы очень признателен.

Я бы разместил сайт, но он небезопасен, поэтому это не будет хорошей идеей. Я могу опубликовать скриншоты или любую другую информацию, которая вам нужна.

Здесь я поместил пару изображений:

Answer 1

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

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

.header-menu li:hover, .header-menu a:hover { 
    background-color: #b89230; 
    color:#fff4d6; 
    text-decoration: none; 
} 

.page-template-cryptofact-page-php .header-menu li:hover, 
.page-template-cryptofact-page-php .header-menu a:hover { 
    background-color: #836F38; 
} 

Удаление !important s, вероятно, хорошая идея ... они обычно затрудняют обслуживание.