如何将：非选择器与>选择器结合使用？

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>

我想用display: none隐藏除子类别之外的所有li。我的想法是使用:not选择器并排除所有子类别。我可以用ul.children > li处理子类别，但我如何将其与:not选择器相结合

有什么想法吗？

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>

Answer 2

如果包含标记<ul>的标记<li>不是动态的，则可以使用表示序数的伪类:nth-child()，并联合使用伪类:not()，不包括父标记<ul>。

ul:not(.children) > :not(li:nth-child(3)) {
display: none;
}

<ul>
<li class="cat-item-15">Parent Category 1</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>

对于包含<ul>标记的<li>标记的剩余，您也可以在:not()伪类中使用伪类:nth-child()。

ul:not(.children) > :not(li:nth-child(3), li:nth-child(7)) {
display: none;
}

<ul>
<li class="cat-item-15">Parent Category 1</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-18">Parent Category 4</li>
<li class="cat-item-19">Parent Category 5</li>
<li class="cat-item-20">Parent Category 6</li>
<li class="cat-item-21">Parent Category 7
<ul class="children">
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
</ul>
</li>
</ul>

如果您有权访问javascript，则可以使用方法forEach()来检查子元素。

document.querySelectorAll("ul:not(.children) > li").forEach((li_has_ul) => {
if (!li_has_ul.children.length) li_has_ul.style.display = "none";
});

<ul>
<li class="cat-item-15">Parent Category 1</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-18">Parent Category 4</li>
<li class="cat-item-19">Parent Category 5</li>
<li class="cat-item-20">Parent Category 6</li>
<li class="cat-item-21">Parent Category 7
<ul class="children">
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
</ul>
</li>
</ul>