仅限Wordpress菜单父项，CSS定位

Question

逻辑让我在我想要实现的目标上逃脱了两天，这就是使用CSS定位wordpress菜单中的某些类元素。对我来说通常很简单，但是（通常很小的）让我战斗。

我需要在菜单项文本后面应用一个小的背景图像到“活动”或“当前”菜单项。但这必须仅适用于父菜单项（不在任何子/子菜单下拉项目上）。应用背景图片很好，所以这不是问题。它仅针对问题的父项目。

我已经尝试了以下CSS的变体（暂时忘记了背景图片，我在这里保持简单，解决目标）以使当前/活动的PARENT菜单项文本变为红色：

.main-navigation div ul li.current-menu-parent a:not(.sub-menu)
{color: red !important;}

（我在网站上注释了这个自定义CSS，以防止混淆）

:not伪我认为可以做到这一点，但它可能是我在语法上的失败，即使我用谷歌搜索它，我可以在今天解决有关CSS的更多信息。

这不符合我的期望。有任何想法吗？如果我与背景图像战斗，我可能会再次回到这里，但我怀疑一旦'CSS目标'得到解决，这应该不是一个问题。

谢谢聪明的人:)

Answer 1

尝试下面，这将选择a标签，这是li.current-menu-parent的直接孩子。

.main-navigation div ul li.current-menu-parent > a{color: red !important;}

Answer 2

似乎jQuery是解决方案的基础，基于@Paulie_D发布的线程Is there a CSS parent selector?，谢谢！

我的jQuery解决方案下面只针对活动的父菜单项，并在<li>菜单标签上插入一个小的背景图像。您可以在下面的屏幕截图中看到黄色的“油漆嗖嗖”图像。

.not用于排除定位下拉子菜单项（其类为.sub-menu）：

$('.main-navigation .current-menu-item, .main-navigation .current-menu-parent').not('.sub-menu li').css(
    {
    'background-image':'url(PATH TO YOUR IMAGE HERE)',
    'background-size': '100% 50px',
    'background-repeat': 'no-repeat',
    'background-position': 'center'
    }
);

qazxsw poi感谢您的投入。我今天学到了一些东西

Answer 3

答案比你想象的更简单：使用 CSS选择器。参见文章>和here。

例如：here

Codepen

/* Target top level only */
.my_navigation > li > a {
    background-color: yellow;
}

/* Or perhaps target only top-level with children */
.my_navigation > .has_children > a {
    background-color: orange;
}

在这种情况下，使用Javascript（例如jQuery）是过度的。如果您正在使用eventlistener并且需要获取所单击目标的父级，那将是一个不同的故事;在这种情况下你需要JS，因为正如其他人提到的CSS还没有父选择器（但它似乎是在CSS4中）。

然而，在这里你只需要在页面渲染上设置样式，WP提供了大量的类来处理。另外：谷歌搜索“wordpress菜单类步行器功能”，你可以生成更多的类，比如识别每个级别的菜单，例如“.top-level”，“。second-level”等