css计数器

本文主要是介绍css计数器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

• 属性：
• counter-reset - 创建或者重置计数器
• counter-increment - 递增变量
• content - 插入生成的内容
• counter() 或 counters() 函数 - 将计数器的值添加到元素

• CSS 计数器属性

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

• 计数器也可用于列表中，列表的子元素会自动创建。ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; }

• 嵌套计数器

• 在每一个 <h1> 元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在 <h2> 元素的前面，内容为 "<主标题计数值>.<副标题计数值>"
• 要使用 CSS 计数器，得先用 counter-reset 创建
•  
• body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }

这篇关于css计数器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！