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

Question

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

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

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

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

我需要以下类型的代码console.log(document.getElementById("translation").querySelectorAll( blank ).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作为 seclctor）。

使用 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")
);