上下文 我有一个包含按层次结构排列的函数的数据库。我可以控制在 Linux 环境中运行的所有级别的基础架构。我的目的是生成一个层次结构显示，其中祖先为水平格式，子级为垂直格式。
基于我希望将表示与功能分开的理解，我有一个生成以下 HTML 的数据库查询。
问题
在英语中，我想知道如何指定一个 css 选择器来选择其子项中没有无序列表的无序列表 (ul) 并以垂直格式显示和显示子项。
鉴于下面的 html，这将同时选择:
- 属于父函数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)
最佳答案
鉴于我可以直接查询数据库以生成 html 标记的上下文，最好的解决方案是修改数据库查询以显式定义父节点。两个好处是 CSS 可以使用显式选择器而不是 javascript 变通，其次 html 变得(恕我直言)更具可读性。
作为一个额外的好处，在更改查询时提供额外的细节是很有用的，从而可以更灵活地定义输出样式。
查询现在将生成输出，根据父节点是否只有子节点显式声明层次结构中节点 (ul) 的类。所以一个节点可以是两个可能的类之一，即叶节点或父节点。然后可以为父节点分配三个次级类之一，即 of_leaves、of_parents 或 of_both。要添加更多信息，每个 div.function 也可以按父级或叶级分类。
因此数据库查询的输出将产生以下 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 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27763653/