Question

我正在尝试在具有“current_page_item”类的菜单中突出显示当前页面列表项。

（在此示例中“关于我们”列表项。）

我在使用CSS中的：not（）排除'children'类（sub ul）时遇到困难，以排除儿童“Careers”突出显示。

<div class="footer-widget-area">
  <ul>
    <li class="page_item page_item_has_children current_page_item"><a href="http://localhost/newtheme/about-us/">About Us</a>
      <ul class='children'>
        <li class="page_item"><a href="http://localhost/newtheme/about-us/careers/">Careers</a></li>
      </ul>
    </li>
    <li class="page_item"><a href="http://localhost/newtheme/contact/">Contact</a></li>
    <li class="page_item"><a href="http://localhost/newtheme/press/">Press</a></li>
  </ul>
</div>

CSS：

.footer-widget-area .current_page_item :not(.children) a {background-color:yellow}

使用：not（.children）实际上与我正在尝试做的相反，突出显示“Careers”（在.children ul类中）而不是“关于我们”（我想强调）

我创造了一个JS小提琴：

https://jsfiddle.net/5vr0sqm5/

提前谢谢。

Answer 1

您要做的是突出显示.current-page-item的直接孩子：

.footer-widget-area .current_page_item > a {background-color:yellow}

Answer 2

为了让:not工作，我认为你想要的是：

.footer-widget-area .current_page_item > :not(.children) a {background-color:yellow}

或

.footer-widget-area .current_page_item ul:not(.children) a {background-color:yellow}

否则父li将满足查询，因为它没有排除的类。

在CSS中使用：not（）给出相反的期望结果

2 个答案: