如何创建一个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伪类

Stack Snippet

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

的级别

Stack Snippet

$("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

我差点说＆＃34;你不能用CSS做到这一点＆＃34; ...但事实证明你可以。

使用可怕的特定子选择器，您可以：p

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

c＆＃39; mon，不要告诉我这不是你今天看到过的最巧妙和最荒谬的CSS系列：）