html - 不仅包含其他列表的样式列表项

Question

我已经根据 <h1>...<h6> 制作了一个目录生成器HTML 文档中的标签。我正在尝试在生成的列表中的列表集之前添加自定义元素符号图标。我设法让这个简单地工作 <h1>...<h2>...<h3>使用 li:before 的级数CSS 选择器，但这对于跳过级别的进程来说是分崩离析的，例如<h1>...<h3> :

没有 li:before属性，中间列表不会产生新行:

这是我想要的:

有没有办法做到这一点，也许使用某种方式只选择 <li>第一个 child 是 <a> 的元素？我对现代 CSS 技巧的经验有限。

这是一个最小的例子:

.contents ul {
    list-style-type: none;
    padding: 0;
    margin-left: 15px;
}

.contents ul li:before {
    font-family: 'FontAwesome';
    content: '\f105';
}

<div class="contents">
  <ul> <!-- h1 level -->
    <li>
      <a href="#top-level">Top level</a>
      <ul> <!-- h2 level -->
        <li>
          <ul> <!-- h3 level -->
            <li>
              <a href="#third-level">Third level</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

作为引用，我使用的是 FontAwesome 的 angle-right 图标(有趣的是，示例片段似乎加载了这种字体)。

Answer 1

像这样将 .contents ul li:before 更改为 .contents ul li:first-child a:before

    
    .contents ul {
        list-style-type: none;
        padding: 0;
        margin-left: 15px;
    }
    
    .contents ul li:first-child a:before  {
        font-family: 'FontAwesome';
        content: '\f105';
    }
    
    

    
    <div class="contents">
      <ul> <!-- h1 level -->
        <li>
          <a href="#top-level">Top level</a>
          <ul> <!-- h2 level -->
            <li>
              <ul> <!-- h3 level -->
                <li>
                  <a href="#third-level">Third level</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>