html
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<link rel="stylesheet" type="text/css" href="css/begin.css"/> ???</head> ???<body> ???????<section> ???????????<h2>登记个人信息</h2> ???????????<ol> ???????????????<li>课程进度推进通知</li> ???????????????<li>即时沟通 ???????????????????<ol> ???????????????????????<li>QQ</li> ???????????????????????<li>微信</li> ???????????????????</ol> ???????????????</li> ???????????????<li>快递收件地址</li> ???????????</ol> ???????</section> ???????<section> ???????????<h2>熟悉课程出品流程</h2> ???????????<figure> ???????????????课程出品流程 ???????????</figure> ???????</section> ???????<section> ???????????<h2>观看在线示例课程</h2> ???????????<figure> ???????????????Dart语言开发 ???????????</figure> ???????????<figure> ???????????????Docker知识体系 ???????????</figure> ???????</section> ???</body></html>
css
body { ???background-color: #eee; ???color: #666; ???counter-reset: xiaobaizhiqian;}section { ???width: 800px; ???margin: 0 auto 20px auto; ???background-color: #fff; ???padding: 10px 20px 20px 20px; ???position: relative; ???overflow: hidden; ???counter-increment: xiaobaizhiqian; ???counter-reset: xiaobaizhiqian-pic;}section p { ???line-height: 1.5;}figure::before,li::before,section:before{ ???font-weight: bold; ???color: #FF5C00;}section:before { ???content: "「新手任务-"counter(xiaobaizhiqian)"」"; ???background-color: #35B558; ???color: #fff; ???text-align: center; ???position: absolute; ???top: 0; ???left: 0; ???padding: 15px 20px;}@-moz-document url-prefix() { ???section:before{ ???????content: "「新手任务-"counter(xiaobaizhiqian,simp-chinese-formal)"」"; ???}}section h2 { ???position: relative; ???top: -20px; ???left: 168px;}ol { ???list-style: none; ???counter-reset: xiaobaizhiqian-li;}li::before { ???counter-increment: xiaobaizhiqian-li; ???content:counters(xiaobaizhiqian-li,".")"：";}figure { ???padding: 0; ???margin: 0 20px 20px 0; ???display: inline-block;}figure::before { ???counter-increment: xiaobaizhiqian-pic; ???content: "图"counter(xiaobaizhiqian-pic,lower-roman);}注意：要将计数器应用在哪个元素上，就在其父元素定义计数器，如果并列有多个元素，那么在这几个元素共同的父元素定义计数器，如本例中有多个section，如果需要每个section都使用计数器，那么就需要将计数器定义在body上；再举个例，本例中给figure标签使用计数器，将计数器定义在了section标签中，离开了section标签后，figure标签计数器便会重新从1开始，如果要使其连贯，则将计数器定义在body中即可
在section中定义计数器
在body中定义计数器
CSS计数器（自定义列表）Demo
原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8324864.html