Question

我根据HTML文档中的<h1>...<h6>标记创建了一个目录生成器。我正在尝试在列表内的结果集之前添加自定义项目符号点图标。我设法通过使用<h1>...<h2>...<h3> CSS选择器让这个用于简单li:before进度，但是对于跳过级别的进度，例如<h1>...<h3>：

如果没有li:before属性，则中间列表不会生成新行：

这就是我想要的：

有没有办法做到这一点，也许用某种方式只选择第一个孩子为<li>的{{1}}元素？我对现代CSS技巧的体验是有限的。

这是一个最小的例子：

<a>

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

作为参考，我使用的是FontAwesome的angle-right图标（有趣的是，示例代码段似乎加载了这种字体）。

Answer 1

将.contents ul li:before更改为.contents ul li:first-child a:before，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

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

样式列表项不仅包含其他列表

2 个答案: