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

【问题标题】：CSS Affect only parent list in the nested listCSS仅影响嵌套列表中的父列表
【发布时间】：2019-11-14 19:50:41
【问题描述】：

我有一个嵌套列表，如下所示。我正在努力寻找可以在 querySelectorAll() JavaScript 函数中使用的特定 CSS 选择器，它只会影响所有不包含 <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>

【问题讨论】：

标签： javascript html css list parent

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您能够使用 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
})

【讨论】：