在 WordPress 中为单个菜单项设置样式答案

【问题标题】：Styling Individual Menu Items in WordPress在 WordPress 中为单个菜单项设置样式
【发布时间】：2013-10-05 06:52:51
【问题描述】：

我正在尝试为我的 WordPress 菜单设置样式。我希望每个菜单项具有不同的颜色，并且页面和帖子上所有子项的背景颜色必须与父文本颜色相同。

我想要的是以下内容：

- <ul id="main-menu" class="menu">
    <li id="1">This is Red
        <ul>
        <li id="4">Background Red</li> 
        </ul> 
    </li>
    <li id="2">This is Blue
        <ul>
        <li id="5">Background Blue</li> 
        </ul> 
    </li>
    <li id="3">This is Green
        <ul>
        <li id="6">Background Green</li> 
        </ul> 
    </li>
- </ul>

我设法只在主页上做到了这一点，以为每个页面都是一样的。但在其他页面上，它并没有像预期的那样反映。

其中包含“>”的列表的 CSS 样式我仍在努力理解 - 我只是觉得它令人困惑。

如果有人能给我指出一个好的教程或告诉我它是如何完成的，我会非常感激。

【问题讨论】：

标签： css wordpress menu

【解决方案1】：

我已经为自己解决了这个问题，我需要应用的样式实际上是这样的：

.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}

这对我有用 - 我知道我必须在颜色样式上多做一些工作。如果有人有更好的解决方案，我会全力以赴:)

显然这只是针对其中一个菜单项 - 其他菜单项的 id 会发生变化

【讨论】：

【解决方案2】：

ID 不能以数字开头，如果您当前正在使用，请更改它。如果无法更改，可以使用[id='1'] {/* some css */}

HTML

<ul class="menu">
    <li id="first">This is Red
        <ul>
            <li>Background Red</li> 
        </ul> 
    </li>
    <li id="second">This is Blue
        <ul>
            <li>Background Blue</li> 
        </ul> 
    </li>
    <li id="third">This is Green
        <ul>
            <li>Background Green</li> 
        </ul> 
    </li>
</ul>

CSS

#first {
    color: red;
}
    #first ul > * {
        background-color: red;
        color: white;
    }
#second {
    color: blue;
}
    #second ul > * {
        background-color: blue;
        color: white;
    }
#third {
    color: green;
}
    #third ul > * {
        background-color: green;
        color: white;
    }

这是在工作http://jsfiddle.net/9mD8z/

希望它能解决你的问题。

【讨论】：

太棒了-谢谢-我正要来这里并再次发布我的解决方案实际上并没有那么好，因为现在我遇到了第三级问题，而您的解决方案解决了这个问题对我来说:)
如果某个答案解决了您的问题，请将其标记为解决方案，以帮助有类似问题的其他人获得准确的答案。并在不同的帖子中提出所有新问题

【解决方案3】：

现在我找到了这个问题的答案:) @外观 > 菜单查看顶部并单击：屏幕选项！然后检查（CSS类）下：显示高级菜单属性因此将显示名为 CSS Classes 的新字段。每个项目！现在您可以定位您从样式表中分配的类。

问候:) 客人！

【讨论】：