html - 如何将 :not Selector 与 > 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选择器结合使用？

有任何想法吗？

标签： htmlcss

Answer 1

不幸的是，如果不向包含 ul.children 的父 li 添加类名，就无法动态执行此操作。有一个:has()伪类可以做到这一点，但它在大多数浏览器中不起作用。

作为替代方案，您可以使用 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>