Question

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

Answer 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 }

CSS Selector用于没有子列表的项列表

1 个答案: