CSS 没有子列表的项目列表的选择器

Question

上下文 我有一个包含按层次结构排列的函数的数据库。我可以控制在 Linux 环境中运行的所有级别的基础设施。我的目的是生成一个层次结构显示，其中祖先为水平格式，子级为垂直格式。

基于我希望将表示与功能分开的理解，我有一个生成下面 HTML 的数据库查询。

问题

在英语中我想知道如何指定 css select 或 select 其子项中没有无序列表的无序列表 (ul) 并显示并以垂直格式显示子项。

鉴于下面的 html 这将 select 两者：

无序列表属于父函数1
无序列表属于函数号2.3

HTML

<body>
<ul>
  <li><div class="function">Parent function 1</div>
    <ul>  <!-- Select this one -->
     <li><div class="function">Function number 1.1</div></li>
     <li><div class="function">Function number 1.2</div></li>
     <li><div class="function">Function number 1.3</div></li>
     <li><div class="function">Function number 1.4</div></li>
    </ul>
  </li>
  <li><div class="function">Parent function 2</div>
   <ul>
    <li><div class="function">Function number 2.1</div></li>
    <li><div class="function">Function number 2.2</div></li>
    <li><div class="function">Function number 2.3</div>
     <ul>  <!-- and this one! -->
      <li><div class="function">Sub function number 2.3.1</div></li>
      <li><div class="function">Sub function number 2.3.2</div></li>
     </ul>
    </li>
   </ul>
 </li>
</ul>
</body>

我的想法是像下面这样的东西不起作用。

CSS

ul > li:not(> ul)

Answer 1

鉴于我可以直接查询数据库以生成 html 标记的上下文，最好的解决方案是修改数据库查询以显式定义父节点。两个好处是 CSS 可以使用显式选择器而不是 javascript 解决方法，其次 html 变得（恕我直言）更具可读性。

作为一个额外的好处，在更改查询时提供额外的细节是很有用的，从而可以更灵活地定义输出样式。

查询现在将生成输出，根据父节点是否只有子节点显式声明层次结构中节点 (ul) 的 class。因此，一个节点可以是两个可能的 classes 之一，即叶节点或父节点。然后可以为父节点分配三个次要 class 之一，即 of_leaves、of_parents 或 of_both。要添加更多信息，每个 div.function 也可以 class 与父级或叶级一起

因此数据库查询的输出将产生以下 html。

HTML

<body>
<ul class="parent of_parents">
  <li><div class="function parent">Parent function 1</div>
    <ul class "parent of_leaves">  <!-- Select this one -->
     <li><div class="function leaf">Function number 1.1</div></li>
     <li><div class="function leaf">Function number 1.2</div></li>
     <li><div class="function leaf">Function number 1.3</div></li>
     <li><div class="function leaf">Function number 1.4</div></li>
    </ul>
  </li>
  <li><div class="function parent">Parent function 2</div>
   <ul class="parent of_both">
    <li><div class="function leaf">Function number 2.1</div></li>
    <li><div class="function leaf">Function number 2.2</div></li>
    <li><div class="function parent">Function number 2.3</div>
     <ul class="parent of_leaves">  <!-- and this one! -->
      <li><div class="function leaf">Sub function number 2.3.1</div></li>
      <li><div class="function leaf">Sub function number 2.3.2</div></li>
     </ul>
    </li>
   </ul>
 </li>
</ul>
</body>

CSS

css 现在就是：

ul.parent.of_leaves { color: red }

CSS 没有子列表的项目列表的选择器

CSS Selector for an a list of items with no child lists

css

hierarchy

css-selectors