css如何使用计数器给元素自动编号？css计数器的使用（代码示例）(2)-木庄网络博客

当前第2页返回上一页

<div class="container">
  <ul>
    <li> 菜单1
      <ul>
        <li>菜单1.1</li>
        <li>菜单1.2</li>
        <li>菜单1.3
          <ul>
            <li>菜单1.3.1</li>
            <li>菜单1.3.2</li>
            <li>菜单1.3.3</li>
            <li>菜单1.3.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>菜单2
      <ul>
        <li>菜单2.1</li>
        <li>菜单2.2</li>
        <li>菜单2.3</li>
      </ul>
    </li>
  </ul>
</div>

css代码：

首先我们要创建一个计数器，定义计数器的名称为：nested-counter，初始化值为：0；增量为：1。

ul {     
   list-style: none;/* 去除ul中默认的样式*/
   counter-reset：nested-counter;
}
ul  li {     
   counter-increment：nested-counter;
   line-height: 1.6;
}

显示计数器很简单。我们将使用一个点作为嵌套计数器之间的分隔符，我们将在计数器和列表项中的文本之间添加一个右括号作为分隔符，仅用于更改。

ul  li ：before {     
/ * counters（）函数内的字符串是两个计数器之间的分隔符，并且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* / 
     content: counters(nested-counter, ".") ") ";
     font-weight: bold;
}

实现效果，看上图。

两个计数器之间的分隔符，可以有很多，如"."、“-”等等。

三、计数器的样式

计数器也是可以设置样式的，不仅仅可以用数字来显示编号，还可以是字母（如a，A）,罗马字符（如：?。???）等等，只要是css list-style-type属性可用的列表样式类型中的任何一种都可以来设置计数器的样式。在之前的文章【css如何设置列表样式？列表样式的实现】中有介绍，大家可以参考一下。

那么如何设置？

这就需要设置style参数，我们来看看基本语法：

1 2	`counter(name，style)` `counters(name，分隔符，style)`

name：计数器名称，style就是样式了。

以下是所有可能的计数器样式：

1	`disc` `\|` `circle` `\|` `square` `\|` `decimal` `\|` `decimal-leading-zero` `\|` `lower-roman` `\|` `upper-roman` `\|` `lower-greek` `\|` `lower-latin` `\|` `upper-latin` `\|` `armenian` `\| georgian \|` `lower-alpha` `\|` `upper-alpha` `\|` `none` `\| inherit`