首页 > 代码库 > 对多个项目添加连续编号示例
对多个项目添加连续编号示例
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*h1:before { content:‘第‘counter(mycounter)‘章‘ }*/ /*添加样式 颜色：blue，字体42px*/ /*h1:before { content:counter(mycounter)‘.‘; color:blue; font-size:42px; }*/ /*添加样式 颜色：blue，字体42px 计数：upper-alpha*/ /*h1:before { content:counter(mycounter,upper-alpha)‘.‘; color:blue; font-size:42px; }*/ /*<元素>{ counter-increment：计数器名 }*/ /*h1 { counter-increment:mycounter; }*/ h1:before { content:counter(mycounter)‘.‘; color:skyblue; /*font-size:20px;*/ } h1 { counter-increment:mycounter; counter-reset:subcounter; } h2:before { content:counter(mycounter)‘-‘counter(subcounter)‘.‘; color:skyblue; /*font-size:20px;*/ } h2 { counter-increment:subcounter; counter-reset:subsubcounter; margin-left:40px; } h3:before { content:counter(mycounter)‘-‘counter(subcounter)‘-‘counter(subsubcounter)‘.‘; color:skyblue; /*font-size:20px;*/ } h3 { counter-increment:subsubcounter; margin-left:40px; } </style></head><body> <!--<h1>大标题</h1> <p>示例文字</p> <h1>大标题</h1> <p>示例文字</p> <h1>大标题</h1> <p>示例文字</p> <h1>大标题</h1> <p>示例文字</p>--> <h1>大标题</h1> <h2>中标题</h2> <h3>小标题</h3> <h3>小标题</h3> <h2>中标题</h2> <h3>小标题</h3> <h3>小标题</h3> <h1>大标题</h1> <h2>中标题</h2> <h3>小标题</h3> <h3>小标题</h3> <h2>中标题</h2> <h3>小标题</h3> <h3>小标题</h3></body></html>
效果如下：
对多个项目添加连续编号示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。