CSS 属性

要使用 CSS 计数器属性，第一步涉及通过 counter-reset 属性创建它。这将启动重置计数器的过程。使用 counter-reset 属性时，计数器默认初始化为零。

属性值

  • <custom-ident>: 名称。名称可以是任何字符串值。

  • <integer>: （可选）每次元素出现时计数器重置的默认值。该值可以为零，甚至负数。如果没有提供整数，计数器将重置为零。

  • none: 不会重置计数器。

语法

counter-reset: <counter name> <integer>  | reversed( <counter-name> ) <integer> ;

    适用范围

    所有 HTML 元素。

    CSS counter-reset: <custom-ident> 

    这里是计数器重置示例:

    <html>
<head>
<style>
   body {
      counter-reset: heading;
   }    
   h1::before {
      counter-increment: heading;
      content: "Heading " counter(heading) ": ";
   }
</style>
</head>
<body>
   <h1>介绍</h1>
   <p>这是介绍部分.</p>  
   <h1>背景</h1>
   <p>这是背景部分.</p>
   <h1>结论</h1>
   <p>这是结论部分.</p>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    CSS counter-reset:  <integer> 

    此程序演示了如何使用整数值的计数器重置属性。在此示例中，我们将 body 元素上的 counter-reset 属性设置为 head-counter 5，这会将 head-counter 计数器的值重置为 5。

    <html>
<head>
<style>
   body {
      counter-reset: head-counter 5;
   }
   h1::before {
      counter-increment: head-counter;
      content: counter(head-counter) " -";
   }
   h2::before {
      counter-increment: head-counter;
      content: counter(head-counter) " -";
   }
   h3::before {
      counter-increment: head-counter;
      content: counter(head-counter) " -";
   }
</style>
</head>
<body>
   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h3>Heading 3</h3>
   <h2>Heading 2</h2>
   <h1>Heading 1</h1>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    CSS counter-reset: reversed

    计数器重置属性取相反的值。它用于反转计数器。

    目前仅在 Firefox 浏览器中有效。
    h1 {
   counter-reset: reversed(item) ;
      /* 在项目计数器上设置反转标志。
          将项目设置为元素数量 */
    }
    p {
      counter-reset : reversed(unit) ;
      /* 在单位计数器上设置反转标志。
       将单位设置为元素数量 */
    } 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    以下示例演示了此功能（在 Firefox 浏览器中执行此示例） ):

    <html>
<head>
<style>
   body {
      counter-reset: reversed(chapter);
   }
   h1::before {
      counter-increment: chapter -1;
      content: "Chapter " counter(chapter) ": ";
   }
</style>
</head>
<body>   
	<h1>介绍</h1>
	<p>这是本书的简介.</p>
	<h1>单元1</h1>
	<p>这是本书的第1单元.</p>
	<h1>单元2</h1>
	<p>这是本书的第2单元.</p>
        <h1>单元3</h1>
	<p>这是本书的第3单元.</p>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22