css计数器如何实现自动嵌套编号

2024-01-17 15:35 小编
  css计数器使用多个counter()函数嵌套编号
 
  css计数器的counter()函数是设置元素单个编号的,但我们可以嵌套使用counter()函数来设置嵌套编号。
 
  我们来看看是如何实现的,给出html代码:
 
  
 
  <article>
 
  <h1>CSS计数器自动嵌套编号</h1>
 
  <h2>大标题</h2>
 
  <h3>二级标题</h3>
 
  <p>
 
  二级标题的内容,二级标题的内容,二级标题的内容!
 
  </p>
 
  <h2>大标题</h2>
 
  <h3>二级标题</h3>
 
  <p>
 
  二级标题的内容,二级标题的内容,二级标题的内容!
 
  </p>
 
  <h3>二级标题</h3>
 
  <p>
 
  二级标题的内容,二级标题的内容,二级标题的内容!
 
  </p>
 
  </article>
 
  效果图:
 
  3.jpg
 
  下面我们就来看看css是如何实现嵌套编号的。
 
  1、使用css计数器让大标题<h2>自动编号
 
  在h2标签的父容器article标签中使用counter-reset属性给css计数器添加名称“my-counter”,初始化计数器;
 
  然后在h2标签中使用counter-increment属性定义计数器每次递增的值,默认值为1,可省略。
 
  最后使用:before选择器和content属性把编号添加到h2标签前显示。
 
  article{
 
  counter-reset:my-counter;
 
  }
 
  h2{
 
  counter-increment:my-counter;
 
  }
 
  h2:before{
 
  content:counter(my-counter)".";
 
  }


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码