使用content属性来插入项目编号

1. 为标题加入标签

h1:before{
content:counter(mycounter);
}
h1{
counter-increment:mycounter;
}

<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>

2. 追加文字：

 h1:before{
                content:'第'counter(mycounter)'章';
                }
        h1{
                counter-increment:mycounter;
                }
                 <div>
                    <h1>标题</h1>
                    <h1>标题</h1>
                    <h1>标题</h1>
                    <h1>标题</h1>
                </div>

3. 编号的种类

 h1:before{
                content:'第'counter(mycounter,upper-alpha)"."'章';
                color: blue;
                font-size: 40px;
                }
        h1{
                counter-increment:mycounter;
                }
             <div>
                 <h1>标题</h1>
                 <h1>标题</h1>
                 <h1>标题</h1>
                <h1>标题</h1>
            </div>    

4. 编号嵌套

 h1:before{
                content:counter(mycounter)".";
                color: blue;
                font-size: 40px;
                }
        h1{
                counter-increment:mycounter;
                counter-reset: subcounter;
                }
                div{
                    /* display: flex; */
                    justify-content: space-between;
                    width: 70%;
                    margin: auto;
                }
                h2:before{
                    content:counter(subcounter)
                }
                h2{
                    counter-increment: subcounter;
                }
                <div>
        <div id="a">
               <h1>标题</h1>
               <h2>小标题</h2>
               <h2>小标题</h2>
               <h2>小标题</h2>
      </div>
      <div id="b">
              <h1>标题</h1>
              <h2>小标题</h2>
             <h2>小标题</h2>
             <h2>小标题</h2>
     </div>