时间戳

首页 > 解决方案 > CSS仅影响嵌套列表中的父列表

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

问题描述

我有一个嵌套列表，如下所示。我正在努力寻找可以在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>

标签： javascripthtmlcsslistparent

解决方案

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

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

推荐阅读