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) 它 returns 3.

我需要以下类型的代码 console.log(document.getElementById("translation").querySelectorAll(blank).length)，它将 return 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")
);

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

CSS Affect only parent list in the nested list

html

javascript

css

list

parent