什么是嵌套计数器?

2024-01-16 13:43 小编
 嵌套计数器
  
  以下实例在页面创建一个计数器,在每一个 <h1> 元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在 <h2> 元素的前面,内容为 "<主标题计数值>.<副标题计数值>":
  
  CSS 实例
  
  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) " ";
  
  }
  
  计数器也可用于列表中,列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串:
  
  CSS 实例
  
  ol {
  
  counter-reset: section;
  
  list-style-type: none;
  
  }
  
  li::before {
  
  counter-increment: section;
  
  content: counters(section,".") " ";
  
  }


Tag: 什么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码