WordPress

Question

我正在一个网站上工作（使用 WordPress），我想将自定义 CSS 添加到所有菜单页面按钮，除了一个页面按钮（联系人），它已经有自己的，单独的 CSS 造型。

CSS 在鼠标悬停的菜单项正下方添加了一条从左向右增长的线。它还会在活动页面正下方设置一条静态线 link.

Hover Effect

我从这里得到了这段代码：https://www.elegantthemes.com/blog/divi-resources/beautiful-css-hover-effects-you-can-add-to-your-divi-menus

那么如何将它添加到除 "Contact" 按钮之外的所有菜单按钮？

下面是代码：

#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%;
}

为每个特定按钮制作此代码而不是为 "Contact" 按钮制作代码会更好吗？如果可以，我该怎么做？

有什么建议吗？提前致谢

Answer 1

您需要做的是找到默认样式，因此删除上面的规则，直到您为 Contact 按钮找到您想要的样式。复制这些样式，并将它们放入带有 #contact 选择器的规则中，然后将 contact 的 ID 属性放在您的 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 规则之上，这样它就会覆盖他们和您的页面看起来就像您想要的那样。

Answer 2

您可以通过 :not 处理您的案件：

为您的 联系人 项目添加特殊性（假设 class exclude-style）
更改您显示的 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

WordPress - 如何将 CSS 样式添加到所有 header 菜单按钮，同时排除一个

WordPress - How to add CSS style to all header menu buttons whilst excluding one

html

css

custom-wordpress-pages