仅限 Wordpress 菜单父项，CSS 定位答案

【问题标题】：Wordpress menu parent item only, CSS targeting仅限 Wordpress 菜单父项，CSS 定位
【发布时间】：2017-08-17 11:16:25
【问题描述】：

两天来，我试图实现的目标是使用 CSS 定位 wordpress 菜单中的某些类元素，逻辑让我不知所措。对我来说，这通常很简单，但有些东西（通常很小）让我战斗。

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

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

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

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

:not 伪我认为可以解决问题，但它可能是我在语法上的失败，即使我用谷歌搜索了它，我今天可能会进一步了解 CSS，当解决时。

它没有按我的预期工作。有任何想法吗？如果我与背景图像战斗，我可能会再次回到这里，但我怀疑一旦“CSS 定位”得到解决，应用就不应该成为问题。

谢谢聪明的人:)

【问题讨论】：

Is there a CSS parent selector? = 否。
可以分享图片或截图吗
更新了我原来的帖子，屏幕截图显示下拉菜单和开发者工具打开显示标签和类。
@Paulie_D 阅读您发布的主题，我假设 Jquery 解决方案？
@Mario JQuery 确实是一个解决方案。

标签： css wordpress menu css-selectors

【解决方案1】：

答案比你想象的要简单：使用> 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;
}

<div>
  <h1>Only top-level parents get styled:</h1>
  <ul class="my_navigation">
    <li><a href="#">Link 1</a></li>
    <li class="current_link has_children">
      <a href="#">Link 2</a>
      <ul>
        <li><a href="#">Link 2a</a></li>
        <li class="current_link has_children"><a href="#">Link 2b</a>
            <ul>
            <li><a href="#">Link I</a></li>
            <li><a href="#">Link II</a></li>
          </ul>
        </li>
        <li><a href="#">Link 2c</a></li>
        <li><a href="#">Link 2d</a></li>
       </ul>
    </li>
    <li>
      <a href="#">Link 3</a>
      <ul>
        <li><a href="#">Link 3a</a></li>
        <li><a href="#">Link 3b</a></li>
       </ul>
    </li>
    <li><a href="#"><a href="#">Link 4</a></li>
  </ul>
</div>

在这种情况下使用 Javascript（例如 jQuery）是多余的。如果您使用事件侦听器并且需要获取单击目标的父级，那将是另一回事；在这种情况下，您确实需要 JS，因为正如其他人提到的那样，CSS 还没有父选择器（但它似乎即将出现在 CSS4 中）。

但是，在这里您只需要在页面渲染中设置项目样式，并且 WP 提供了过多的类可供使用。另外：做一个谷歌搜索“wordpress menu class walker function”，你可以生成更多的类，比如识别每个级别的菜单，例如“.top-level”、“.second-level”等

【讨论】：

父类也可以是..menu-item-has-children

【解决方案2】：

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

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

【讨论】：

我试过你的CSS，没有效果。事实上，什么都没变红。

【解决方案3】：

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

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

.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'
    }
);

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

【讨论】：