如何创建一个html列表，其中包含UL级别编号作为列表值的结果

Question

我正在尝试使用CSS创建一个类似于以下内容的HTML列表

1.列出项目

2.列出项目

3.列出项目

3.列出项目

3.列出项目

4.列出项目

4.列出项目

2.列出项目

2.列出项目

1.列出项目

1.列出项目

2.列出项目

1.列出项目

我试过以下，我不需要当前的列表项编号

ul {
  counter-reset: section;
  list-style-type: none;
}

li:before {
  color: red;
  counter-increment: section;
  content: counters(section, ".") " ";
}

<ul>
    <li>LIST ITEM</li>
    <li>
        <ul>
            <li>LIST ITEM</li>
            <li>
                <ul>
                    <li>LIST ITEM</li>
                    <li>LIST ITEM</li>
                </ul>
            </li>
            <li>LIST ITEM</li>
        </ul>
    </li>
    <li>LIST ITEM</li>
    <li>
        <ul>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
        </ul>
    </li>
    <li>LIST ITEM</li>
</ul>

Answer 1

你不需要在这里使用计数器，因为你没有在同一级别上增加或减少你的计数器值...而是为每个级别使用:before伪类

堆栈代码段

ul {
  list-style-type: none;
  font: 13px Verdana;
}

ul li:before {
  content: "1. Link ";
  color: red;
}

ul li li:before {
  content: "2. Link ";
}

ul li li li:before {
  content: "3. Link ";
}

<ul>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>
        <ul>
          <li>LIST ITEM</li>
          <li>LIST ITEM</li>
        </ul>
      </li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
</ul>

更新：如果你想要动态解决方案使用parents() jQuery来计算每个li的级别

堆栈代码段

$("li").each(function() {
  $(this).attr("data-level", $(this).parents("ul").length)
})

body {
  margin-top: 40px;
}

ul {
  list-style-type: none;
  font: 13px Verdana;
  margin-top: -15px;
  position: relative;
  background: #fff;
}

ul li:before {
  content: attr(data-level) ". ";
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>
        <ul>
          <li>LIST ITEM</li>
          <li>LIST ITEM</li>
        </ul>
      </li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
</ul>

Answer 2

我差点说“你不能用CSS做到这一点”......但事实证明你可以。

通过可怕的特定儿童选择器，您可以：p

ul {
  list-style-type:none;
}

ul li:before {
  content:"1. ";
}

ul > ul li:before{
  content:"2. ";
}

ul > ul > ul li:before{
  content:"3. ";
}

ul > ul > ul > ul li:before{
  content:"4. ";
}

/* and so on, and so forth :p */

<ul>
    <li>LIST ITEM</li>
    <ul>
        <li>LIST ITEM</li>
        <ul>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
        </ul>
        <li>LIST ITEM</li>
    </ul>
    <li>LIST ITEM</li>
    <ul>
        <li>LIST ITEM</li>
        <li>LIST ITEM</li>
        <li>LIST ITEM</li>
        <li>LIST ITEM</li>
        <ul>
          <li>LIST ITEM</li>
          <ul>
                <li>LIST ITEM</li>
          </ul>
       </ul>
    </ul>
    <li>LIST ITEM</li>
</ul>

来吧，不要告诉我这不是你今天看到的最巧妙和最荒谬的CSS系列:)