css 计数实现目录索引
代码1
虽然生成了目录编号,但是可以看到目录效果 1.5 显示并不正确(待修正)
源码如下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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
修改后的效果
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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计数器效果不同。那么有什么办法可以让两种代码都可以正常显示目录索引效果呢(待定)
参考:
打不死的小强