样式化不仅包含其他列表的列表项答案

【问题标题】：Styling list items that do not only contain other lists样式化不仅包含其他列表的列表项
【发布时间】：2018-05-01 00:24:38
【问题描述】：

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

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

这就是我想要的：

有没有办法做到这一点，也许使用某种方式只选择第一个孩子是<a> 的<li> 元素？我对现代 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 图标（有趣的是，示例 sn-p 似乎加载了这种字体）。

【问题讨论】：

标签： html css css-selectors html-lists

【解决方案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>

【讨论】：

您能否通过示例说明您想要的内容，以便我可以修改我的帖子？
行得通！所以最后真的很简单。我应该包含额外的列表项以准确显示我想要的内容，但实际上我希望每个条目旁边都有一个右箭头。谢谢！

【解决方案2】：

扩展@FridayAmeh 的答案以识别仅 第一个 li 与锚点并将样式应用于该锚点。

你需要

.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";
  position: relative;
  margin-left: -.4em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<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>
            <li>
              <a href="#third-level">Third level</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

感谢您的意见。我想在每个项目旁边都有右箭头，这不清楚，抱歉。 @Friday Ameh 的回答似乎有效。