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

Posted 2023-03-05

【中文标题】WordPress - 如何将 CSS 样式添加到所有标题菜单按钮，同时排除一个

【英文标题】：WordPress - How to add CSS style to all header menu buttons whilst excluding one

【发布时间】：2019-02-12 05:47:28

【问题描述】：

我正在开发一个网站（使用 WordPress），我想将自定义 CSS 添加到所有菜单页面按钮，但一个页面按钮 (Contact) 已经拥有自己的独立 CSS 样式。

CSS 在悬停的菜单项正下方添加了一条看起来从左到右增长的线。它还会在活动页面链接的正下方设置一条静态线。

Hover Effect

我从这里得到这个代码：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%;

为每个特定按钮编写此代码而不为“联系”按钮编写代码会更好吗？如果可以，我该怎么做？

有什么建议吗？提前致谢

【参考方案1】：

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

为您的Contact 项目添加特异性（比如说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

【讨论】：

谢谢，我实际上是从Divi自己那里得到答案的，答案和你的一样，但你把它分解得更多了。再次感谢您的全面回答。

【参考方案2】：

你需要做的是找到默认样式，所以删除上面的规则，直到你为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 规则，这样它就会覆盖它们并且您的页面看起来像您想要的那样它到。

【讨论】：

感谢您的回答，我与 Divi 支持人员进行了交谈，这帮助了我，但我会记住您的回答，以防再次出现类似问题。