华山资源网

CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)
网页制作 2024/11/18 佚名
3 1

编写文档手册的时候，我们经常需要列表项前面的序号将上级各层的序号也附加在前面，如下图：

(图一)

  CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

但默认的<ol>列表，任何层次都是单个序号开始。如下图：

(图二)

CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

要实现图一效果，方法之一是直接将序号部分作为列表内容的一部分，插入相应的HTML，可使用js批量插入序号。

生成的HTML结果类似这样

<ol>  
  <li>1. 列表项  
    <ol>  
      <li>1.1. 列表项  
        <ol>  
          <li>1.1.1 列表项</li>  
          <li>1.1.2 列表项</li>  
          <li>1.1.3 列表项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

 
如果既不想将序号硬写在html代码里，也不想引入js，那么只能从HTML属性和CSS两个方面来突破了。

遗憾的是，HTML元素属性并没有提供类似的接口。

经网友提示，知道了有个叫css counter 的概念，我孤陋寡闻了。

查询有关文档之后，CSS解决方案也就有了。

HTML代码如下：

<ol>  
  <li>列表项  
    <ol>  
      <li>列表项  
        <ol>  
          <li>列表项</li>  
          <li>列表项</li>  
          <li>列表项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

CSS代码如下：

ol {padding:0 0 0 20px;margin:0;list-style:none;}  
li:before {color:#f00; font-family:Times New Roman;}  
li{counter-increment:a 1;}  
li:before{content:counter(a)". ";}  
li li{counter-increment:b 1;}  
li li:before{content:counter(a)"."counter(b)". ";}  
li li li{counter-increment:c 1;}  
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}


效果就是本篇开头的图一。

可是这个CSS写的实在是丑陋，有几级目录，就得写几层的CSS，显然不应该是这样子的。

继续阅读了相关文档，明确了counter-reset , counter(), counters() 之后，发现问题竟是异常的简单。

CSS代码如下：

ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;}  
li:before {counter-increment:a;content:counters(a,".")". ";}

这样，无论多少层的嵌套列表，都能正确显示级联序号了，效果如本篇开头的图一。
需要指出的是，:before, counter-increment 等相关CSS特性不支持古老的IE6/IE7，但是IE8及以上是支持的很好的。

以上就是小编整理的全部内容啦，希望对大家有所帮助。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com