为非仅含嵌套列表的列表项设样式及目录生成器层级适配问题

嘿，这个问题我之前做目录生成工具时也踩过坑！用li:before处理层级图标时，连续层级（h1→h2→h3）没问题，但跳级场景（h1直接跳h3）就失效，还会出现换行异常，核心问题其实出在列表结构的语义匹配和CSS选择器的依赖逻辑上，咱们一步步来解决：

1. 先把HTML结构拉正——跳级时补全嵌套层级 #

跳级时样式失效的根源，往往是生成的列表结构没对应标题层级。比如h1之后直接出h3，不能把h3的li直接放在h1的同层级ul里，得补全中间的层级嵌套（哪怕是空的），保证每个标题层级对应正确的嵌套深度：

<ul class="toc">
  <!-- h1层级 -->
  <li class="toc-item toc-h1">
    <span class="toc-text">一级标题</span>
    <!-- 补全h2层级的空ul，保证h3的嵌套深度正确 -->
    <ul class="toc-level-2">
      <ul class="toc-level-3">
        <!-- h3层级 -->
        <li class="toc-item toc-h3">
          <span class="toc-text">三级标题（跳过h2）</span>
        </li>
      </ul>
    </ul>
  </li>
</ul>

生成目录时可以加个逻辑：记录当前标题层级，遇到跳级时自动补全中间层级的空ul，确保每个标题的li都在对应深度的ul里。

2. 用明确的层级类替代嵌套依赖的CSS选择器 #

之前只靠li > ul > li这种嵌套关系写:before，跳级时嵌套深度乱了就会失效。不如给每个li加上对应标题层级的类（比如toc-h1到toc-h6），直接精准匹配样式：

/* 重置列表默认样式 */
.toc {
  list-style: none;
  padding-left: 0;
}

.toc-item {
  position: relative;
  padding-left: 28px; /* 给图标留空间 */
  margin: 6px 0;
  display: block; /* 强制块级，保证换行 */
}

/* 不同层级的自定义图标 */
.toc-h1:before {
  content: "📌";
  position: absolute;
  left: 0;
  top: 2px;
}

.toc-h2:before {
  content: "🔹";
  position: absolute;
  left: 0;
  top: 2px;
}

.toc-h3:before {
  content: "🔸";
  position: absolute;
  left: 0;
  top: 2px;
}

/* 子列表的缩进控制 */
.toc ul {
  padding-left: 18px;
  margin: 4px 0;
  display: block; /* 空ul也能占块级空间，保证换行 */
}

3. 处理「非仅含子列表」的列表项样式 #

要区分“带文本的列表项”和“仅含子列表的空项”，可以用CSS的:has()选择器（兼容现代浏览器），或者生成HTML时给空项加自定义类：

/* 给带文本的列表项加样式（比如加粗） */
.toc-item:has(> .toc-text) {
  font-weight: 600;
  color: #2d3748;
}

/* 给仅含子列表的空项调整样式（比如缩小缩进、隐藏图标） */
.toc-item:has(> ul):not(:has(> .toc-text)) {
  padding-left: 18px;
  margin: 0;
}
/* 兼容旧浏览器的话，给空项加.toc-empty类，用.toc-empty替代上面的选择器 */
.toc-empty {
  padding-left: 18px;
  margin: 0;
}

最后总结一下 #

核心思路就是：先保证HTML结构的语义正确性（跳级时补全嵌套），用明确的层级类替代嵌套依赖的CSS选择器，再通过CSS区分不同类型的列表项。这样不管是连续层级还是跳级场景，图标和换行都能正常工作。

内容的提问来源于stack exchange，提问作者Sean