WordPress - Как добавить стиль CSS для всех кнопок меню заголовка, за исключением одной

Question

Я работаю над сайтом (используя WordPress) и хочу добавить пользовательский CSS для всех кнопок страницы меню, кроме одной кнопки страницы (Contact), у которой уже есть свой собственный, отдельный стиль CSS.

CSS добавляет линию, которая, кажется, растет слева направо, прямо под элементом меню, наведенным на него. Он также установит статическую линию непосредственно под ссылкой активной страницы.

Эффект наведения

Я получил этот код отсюда: https://www.elegantthemes.com/blog/divi-resources/beautiful-css-hover-effects-you-can-add-to-your-divi-menus

Так, как я могу добавить это ко всем кнопкам меню, кроме кнопки «Контакт»?

Вот код ниже:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Было бы лучше сделать этот код для каждой конкретной кнопки, а не для кода «Контакт»? Если да, то как я могу это сделать?

Есть предложения? Заранее спасибо

Answer 1

Вы можете обработать ваш случай с помощью :not:

1. добавление специфичности к вашему контакту элементу (скажем, классу exclude-style)
2. изменяя селекторы CSS, которые вы показываете, так что каждый a:*** становится a:not(.exclude-style):***

Как это:

#top-menu .current-menu-item a:not(.exclude-style)::before

#top-menu li a:not(.exclude-style):before

#top-menu li a:not(.exclude-style):hover

#top-menu li a:not(.exclude-style):hover:before

#top-menu li li a:not(.exclude-style):before

Answer 2

Что вам нужно сделать, это найти стили по умолчанию, поэтому удалите приведенные выше правила, пока у вас не будет стиля, который вы хотите использовать для кнопки Contact. Скопируйте эти стили и поместите их в правило с помощью селектора #contact и поместите атрибут ID contact на кнопку Contact, как здесь: <a href="contact.html" id="contact">Contact</a> или любой другой элемент Contact. Затем используйте следующий CSS:

#contact {
    /*Styles on the Contact button only, for example: */
    background-color: orange;
}

Эти стили будут применяться только к кнопке Contact. Вы можете поместить свои стили для других кнопок обратно, только убедитесь, что они выше нового правила #contact, поэтому оно переопределяет их, и ваша страница выглядит так, как вы этого хотите .