首页 - 互联网

CSS 计数器(counter)

作者: 五速梦信息网
时间: 2026年03月19日 18:20

css计数器

CSS计数器是由CSS维护的“变量”，其值可以通过CSS规则递增（以跟踪它们的使用次数）。计数器允许您根据文档中的位置调整内容的外观。

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

嵌套计数器

以下示例为页面（节）创建一个计数器，为每个<h1>元素（子节）创建一个计数器。对于每个<h1>元素，“section”计数器将计为“Section < 值的分区计数器 >。”，并且“subsection”计数器将计入每个<h2>元素，记入“<分区计数器的值 >==< 分段计数器的值 >“：

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

ol {
  counter-reset: section;
  list-style-type: none;
}
 
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

CSS计数器属性

属性	描述
content	与::before和::after伪元素一起使用，插入生成的内容
counter-increment	递增一个或多个计数器值
counter-reset	创建或重置一个或多个计数器

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！