CSS仅影响嵌套列表中的父列表

Question

我有一个嵌套列表，如下所示。我正在努力寻找可以在querySelectorAll() JavaScript函数中使用的特定CSS选择器，该选择器只会影响不包含<li>标签的所有<ul>标签。因此，在这种情况下，应该只是行

    <li>foot</li>
    <li>leg</li>
    <li>tiger</li>
    <li>elephant</li>
    <li>food</li>

我用querySelectorAll("ol > li")选择器尝试了:not()和其他方法，但没有成功。

querySelectorAll("ol > li ul")与我想要的相反，因为当我使用console.log(document.getElementById("translation").querySelectorAll("ol > li ul").length)返回3。

我需要以下类型的代码console.log(document.getElementById("translation").querySelectorAll(空白).length)，它将返回5。我不知道是否有可能，而且在网上也找不到。

查看它的另一种方法是让此CSS代码仅将不包含其他嵌套列表的项目着色（这样，只有2-6点将具有彩色背景）：

#translation ol > li ul{
  background-color: cyan;
}

整个列表：

<div id="translation">
  <ol>
    <li>
      <ul>
        <li>parting</li>
        <li>parting</li>
        <li>parting</li>
        <li>separation</li>
        <li>separation</li>
        <li>separation</li>
        <li>farewell</li>
        <li>(lateral) branch</li>
        <li>fork</li>
        <li>offshoot</li>
      </ul>
    </li>
    <li>foot</li>
    <li>leg</li>
    <li>tiger</li>
    <li>elephant</li>
    <li>food</li>
    <li>
      <ul>
        <li>branch</li>
        <li>parting</li>
        <li>disaffiliation</li>
        <li>disaffiliation</li>
        <li>separation</li>
        <li>(lateral) branch</li>
        <li>farewell</li>
        <li>branch</li>
        <li>division</li>
      </ul>
    </li>
    <li>
      <ul>
        <li>dissociation</li>
        <li>disaffiliation</li>
        <li>dissociation</li>
      </ul>
    </li>
  </ol>
</div>

Answer 1

如果能够使用jQuery，则使：not选择器捕获以ul作为子元素的元素。像这样的东西：

$("translation").find("ol > li:not(:has(>ul))")

请注意，此解决方案适用于jQuery选择器，但不适用于Vanilla JS（Vanilla JS不支持:has作为引用）。

使用Vanilla JS，您可能想做这样的事情：

const elems = document.getElementById("translation").querySelectorAll('ol > li');
let items = Array.from(elems); // convert to Array type

items.filter(item => { // filter the array
  item.querySelectorAll('ul').length == 0
})

Answer 2

您需要检查每个li是否childNodes有ul。例如这样：

const test = [...document.querySelectorAll("ol > li")].filter(
  li => ![...li.childNodes].find(child => child.localName === "ul")
);