对多个项目添加连续编号示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*h1:before {
        content:'第'counter(mycounter)'章'
        }*/

        /*添加样式 颜色：blue，字体42px*/
         /*h1:before {
        content:counter(mycounter)'.';
        color:blue;
        font-size:42px;
       
        }*/
    
       /*添加样式 颜色：blue，字体42px 计数：upper-alpha*/
        /*h1:before {
        content:counter(mycounter,upper-alpha)'.';
        color:blue;
        font-size:42px;
       
        }*/
         /*<元素>{
        counter-increment：计数器名
     }*/
        /*h1 {
        counter-increment:mycounter;
    
        }*/

        h1:before {
        content:counter(mycounter)'.';
        color:skyblue;
        /*font-size:20px;*/
        }
        h1 {
        counter-increment:mycounter;
        counter-reset:subcounter;
        }

        h2:before {
        content:counter(mycounter)'-'counter(subcounter)'.';
        color:skyblue;
        /*font-size:20px;*/
        }
        h2 {
        counter-increment:subcounter;
        counter-reset:subsubcounter;
        margin-left:40px;
        }

        h3:before {
        content:counter(mycounter)'-'counter(subcounter)'-'counter(subsubcounter)'.';
        color:skyblue;
        /*font-size:20px;*/
        }
        h3 {
        counter-increment:subsubcounter;
       margin-left:40px;
    
        }
    </style>
</head>
<body>
    <!--<h1>大标题</h1>
    <p>示例文字</p>
    <h1>大标题</h1>
    <p>示例文字</p>
    <h1>大标题</h1>
    <p>示例文字</p>
    <h1>大标题</h1>
    <p>示例文字</p>-->
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h3>小标题</h3>
    <h3>小标题</h3>
    <h2>中标题</h2>
    <h3>小标题</h3>
    <h3>小标题</h3>
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h3>小标题</h3>
    <h3>小标题</h3>
    <h2>中标题</h2>
    <h3>小标题</h3>
    <h3>小标题</h3>
</body>
</html>
效果如下：