Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS counter 实现复杂的有序列表

  CSS中有计数器可以使用,而且是从IE8就开始支持的。只因为前几年大家对IE6、7的兼容还有所保留,所以没有使用这些东西。CSS counter实际上就类似于Word中的自动编号功能,但未必要使用OL、LI,这些标签。它可以自动统计,最后可以用伪元素输出序号。
  首先,不用OL、LI要怎么实现有序列表?这是可以实现的,比如下面用DIV来实现
<style>
#ul {counter-reset:c;}
#ul>*:before {
  margin-right:3px;
  content:counter(c) ".";
  counter-increment:c;
}
</style>
<div id="ul">
  <div>高举中国特色社会主义伟大旗帜</div>
  <div>加强中国特色社会主义理论体系学习实践</div>
  <div>全面推进建设小康社会各项事业</div>
  <div>着力保障和改善民生</div>
  <div>全面推进党的建设新的伟大工程</div>
  <div>深化改革开放</div>
</div>
  在容易上使用counter-reset:name创建一个计数器,然后容器的子元素可以使用counter(name)来引用祖先级元素中创建的计数器。当然如果只是引用的话这个值是不会增长的,只有在每次使用时同时使用counter-increment:name才会在每次使用时自己增长。
  counter当然可以创建不止一个,多个counter在多级容器上嵌套就可以实现复杂的有序列表,比如这样:
<style>
body {counter-reset:c1;}
body>div:before {
  margin-right:3px;
  content:counter(c1) ".";
  counter-increment:c1;
  counter-reset:c2;
}
body>div>div {padding-left:1em;}
body>div>div:before {
  margin-right:3px;
  content:counter(c1) "." counter(c2) ".";
  counter-increment:c2;
}
</style>
<div>蔬菜
  <div>洋葱</div>
  <div>土豆</div>
</div>
<div>水果
  <div>枇杷</div>
  <div>芒果</div>
</div>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^