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

【问题标题】：CSS Selector for an a list of items with no child lists没有子列表的项目列表的 CSS 选择器
【发布时间】：2015-01-12 09:01:11
【问题描述】：

上下文 我有一个包含按层次结构排列的函数的数据库。我可以控制在 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)

【问题讨论】：

这在使用 CSS 时是不可能的。你需要 JavaScript 或 jQuery。
问题现已重新打开；你可以添加你的答案。

标签： css css-selectors hierarchy

【解决方案1】：

鉴于我可以直接查询数据库以生成 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 }

【讨论】：