CSS教程

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计数器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航