html - 如何结合 :not Selector with > Selector?

Question

我有一个看起来像这样的无序列表，但更广泛:

<ul>
   <li class="cat-item-15">Parent Category 2</li>
   <li class="cat-item-16">Parent Category 2</li>
   <li class="cat-item-17">Parent Category 3
        <ul class="children">
          <li>Child Category 1</li>
          <li>Child Category 2</li>
          <li>Child Category 3</li>
        </ul>
   </li>
</ul>

我想隐藏每个 li除了带有 display: none 的子类别.我的想法是使用 :not选择并排除所有子类别。我可以使用 ul.children > li 处理子类别但是我如何将它与 :not 结合起来选择器？

有任何想法吗？

Answer 1

不幸的是，没有一种方法可以在不向包含 ul.children 的父 li 添加类名的情况下动态执行此操作。有一个:has()伪类可以完成此操作，但在 most browsers 中不起作用.
作为替代方法，您可以使用 javascript 将唯一类动态应用于包含 ul.children 列表的父项。这将允许您使用新类定位父列表项。我附上了一个使用 JS 的工作示例。

var menuItems = document.querySelectorAll('li');

menuItems.forEach(menuItem => {
    var submenu = menuItem.querySelectorAll('.children');

    if (submenu.length) {
        menuItem.classList.add('has-sub-menu');
    }
});

ul li {
  display: none;
}

ul li.has-sub-menu {
   display: block;
}

ul.children li {
   display: block;
}

<ul>
   <li class="cat-item-15">Parent Category 2</li>
   <li class="cat-item-16">Parent Category 2</li>
   <li class="cat-item-17">Parent Category 3
        <ul class="children">
          <li>Child Category 1</li>
          <li>Child Category 2</li>
          <li>Child Category 3</li>
        </ul>
   </li>
   <li class="cat-item-17">Parent Category 4</li>
   <li class="cat-item-17">Parent Category 5
        <ul class="children">
          <li>Child Category 1</li>
          <li>Child Category 2</li>
          <li>Child Category 3</li>
        </ul>
   </li>
</ul>