如何创建以UL级别数字作为列表值的结果的html列表

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

这里不需要计数器，因为您没有为每个级别在同一个level...use :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 :)