代码1
虽然生成了目录编号，但是可以看到目录效果 1.5 显示并不正确（待修正）
源码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #catalog ul, .menu+ul { counter-reset: section; list-style-type: none; } #catalog .menu, #catalog .menu-item { counter-increment: section; } #catalog .menu:before, #catalog .menu-item:before { content: counters(section, ".") ". "; } li { margin-top: 12px; margin-bottom: 12px; } </style> </head> <body> <div id="catalog"> <ul> <li class="menu">css计数器</li> <ul> <li class="menu-item">counter-reset - 创建或者重置计数器</li> <li class="menu-item">counter-increment - 递增变量</li> <li class="menu-item">content - 插入生成的内容</li> <li class="menu-item">counter() 或 counters() 函数 - 将计数器的值添加到元素</li> </ul> <li class="menu">使用</li> <ul> <li class="menu-item">初始化计数器</li> <li class="menu-item">语法</li> <ul> <li class="menu-item">counter-reset：none | [<identifier><integer>]+</li> </ul> </li> <li class="menu-item">取值</li> <ul> <li class="menu-item">none：阻止计数器复位</li> <li class="menu-item"><identifier>：identifier定义一个或多个将被复位的selector，id，或者class</li> <li class="menu-item"><integer>： 定义被复位的数值，可以为负值，默认值是0</li> </ul> </ul> </ul> </div> </body> </html>
代码2
修改后的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #catalog ul { counter-reset: section; list-style-type: none; } #catalog ul li { counter-increment: section; } #catalog ul li:before { content: counters(section, ".") ". "; } li { margin-top: 12px; margin-bottom: 12px; } </style> </head> <body> <div id="catalog"> <ul> <li>css计数器 <ul> <li>counter-reset - 创建或者重置计数器</li> <li>counter-increment - 递增变量</li> <li>content - 插入生成的内容</li> <li>counter() 或 counters() 函数 - 将计数器的值添加到元素</li> </ul> </li> <li>使用 <ul> <li>初始化计数器 <ul> <li> 语法 <ul> <li>counter-reset：none | [<identifier><integer>]+</li> </ul> </li> <li> 取值 <ul> <li>none：阻止计数器复位</li> <li><identifier>：identifier定义一个或多个将被复位的selector，id，或者class </li> <li><integer>： 定义被复位的数值，可以为负值，默认值是0 </li> </ul> </li> </ul> </li> <li>计数器自增 <ul> <li> 语法 <ul> <li>counter-increment：none | [<identifier><integer>]+</li> </ul> </li> <li> 取值 <ul> <li>none：阻止计数器增加</li> <li><identifier>：identifier定义一个或多个将被复位的selector，id，或者class </li> <li><integer>： 定义计算器每次增加的数值，可以为负值，默认值是1 </li> </ul> </li> </ul> </li> <li>显示计数器 <ul> <li> 语法 <ul> <li>content：normal | counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type) </li> </ul> </li> <li> 取值 <ul> <li>normal：默认值。表现与none值相同</li> <li>none： 不生成任何值。</li> <li>counter(name)： 使用已命名的计数器</li> <li>counter(name,list-style-type)： 使用已命名的计数器并遵从指定的list-style-type属性</li> <li>counters(name,string)： 使用所有已命名的计数器</li> <li>counters(name,string,list-style-type)： 使用所有已命名的计数器并遵从指定的list-style-type属性</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
分析
可以看到，两种代码的html目录结构对于菜单项的展示上有点不一样，从而css计数器效果不同。那么有什么办法可以让两种代码都可以正常显示目录索引效果呢（待定）
参考: