How to use counter to automatically number elements in css? Use of css counter (code example)

How to use counters to automatically number elements in css? This article will introduce you to how to set up and use css counters. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [What is a css counter (counter)] we briefly introduced the relevant properties of the css counter, and briefly learned about the use of the css counter through code examples. In this article, we will take a closer look at how to set up and use CSS counters, and how to implement automatic numbering of elements. [Recommended related video tutorials: CSS3 Tutorial]

1. Set up and use css counters to implement simple element numbering

In order to create and use a CSS counter, follow these steps:

1. Set the name of the counter and reset it to the initial value of our choice. This is done using the counter-reset attribute.

counter-reset:   标识符（计数器的名称）   <整数>（起始值,可选，默认值为0）;

Initializing the counter (specifying the starting value) is optional. If an exact value is not specified, it will start from zero, and the counter implementation at this time will start from '1'.

The counter-reset attribute is set on the ancestor or sibling element of the element to be numbered. For example, if you number titles in an article, you can set counters on the ancestors of those titles.

article {     
/ *设置一个名为“section”的计数器，并将其初始化为0 * / 
    counter-reset：section 0 ;
}

The reasoning behind this is that resetting the counter on a numbered element will result in an element with the same number appearing. This is because the counter will be reset to its initial value and then incremented for each title before being displayed.

2. Specify when the counter increments and by what value.

For example, if you want the counter to increment every time the h2 header appears, you can specify this; this is done using the counter-increment attribute. We can choose to increment the counter by any value for each occurrence of the element to be numbered (h2 in this case). By default, the counter will be incremented by 1; we can also use negative values ​​so that the counter will be decremented.

h2 {     
/ *在每次出现h2时使用“section”计数器，并每次出现就增加1（默认值）* / 
    counter-increment：section 1 ;
}

One important thing to note here is: The counter is incremented before displaying, so if we want the first title to start from 1, we should change the counter in the calculator The initial value of the counter-reset attribute is set to zero.

3. Display the counter

After setting the counter and specifying when and how much it should be incremented, we need todisplay the counter.

To display the counter, we need to use the counter() function of the content attribute (or counters() nested counter) as the value of the ::before pseudo-element.

In our example we are numbering the h2 heading, so we will display the counter before the heading:

h2 :: before {     
   content：counter（section）;
}

Of course, if you wish to add between the number of the heading and the heading Some spaces and possibly any other delimiters, you can do this by appending the delimiter to the counter() function of the counter, using a string as the value, for example:

h2::before {    
 /* 在数字之后加一个点，后面加上空格 */
    content: counter(my-counter) ". "; 
}

Let me take a look below Example:

html code:

<h2 id="css计数器的使用">css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>
         
<h2 id="css计数器的使用">css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

css code:

 body{
     counter-reset: section;
}
             
 h2:before{
     counter-increment: section;
     content: counter(section) ".";
}

Rendering:

2. Set the nesting counter to realize the nesting number of elements

Sometimes there will be multiple 2-level titles, 3-level titles, and titles under a big title. One nested one inside another (for example, in the picture below), how to number them?

Let’s introduce the method of using nested counters to implement nested numbering of elements.

To implement nested numbering of elements, the easiest way is to use the counters() function; using this function, we can set multiple counters in one declaration. By default, these Counters will be nested.

Example introduction: We will use the counters() function to set nested counters on nested lists. Lists (ul, ol) can be nested several levels into markup, so we can use the counters() function.

html code:

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

First we need to create a counter, define the name of the counter as: nested-counter, initialization value is: 0; increment is: 1.

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

Displaying counters is easy. We will use a dot as a separator between nested counters, and we will add a closing bracket as a separator between the counter and the text in the list item, just for changes.

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

To achieve the effect, see the picture above.

There can be many separators between two counters, such as ".", "-", etc.

3. Counter style

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

那么如何设置？

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

counter(name，style)
counters(name，分隔符，style)

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

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

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

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

The above is the detailed content of How to use counter to automatically number elements in css? Use of css counter (code example). For more information, please follow other related articles on the PHP Chinese website!