Question

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

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

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

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

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

我认为:not伪可以解决这个问题，但可能是我在语法上的失败，即使我用Google搜索了它，我今天可以在解决的问题上进一步了解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'
    }
);

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

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

<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提供了很多类可以使用。另外：在Google上搜索“ wordpress菜单类浏览器功能”，您可以生成更多类，例如识别菜单的每个级别，例如“ .top-level”，“。second-level”等。

仅限Wordpress菜单父项，CSS定位

3 个答案: