CSS Counter计数器的详解

div>h2{

      counter-increment:one;       /*将计数器命名为one*/

      counter-reset:two;              /*将two计数器重置归零*/

}

div>div{

      counter-increment:two;

}

div>h2:before{

      content:counter(one,georgian) '.';  /*这里调用计数器one, 显示样式是georgian*/

      font-size:20pt;

      font-weight:bold;

}

div>div:before{

      content:'第' counter(two) '本.';

      font-size:13pt;

      font-weight:bold;

 }

 

<html>

<body>

         <div>

                 <h2>系列一</h2>

                  <div> java语言使用教程</div>

                  <div>C++语言程序设计</div>

                  <div>css网站布局</div>

                  <h2>系列二</h2>

                  <div>四级词汇</div>

                  <div>大学专业英语</div>

                  <div>易考范文背诵</div>

         </div>

</body>

</html>

 

counter(name)counter(name, style)

这里对 style样式介绍一下:

  • disc :实心圆点;
  • circle:空心圆点;
  • square:实心方块;
  • decimal:阿拉伯数字;
  • lower-roman:i, ii, iii, iv, v…
  • upper-roman.:I, II, III, IV, V…
  • lower-greek:α, β, γ…
  • upper-latin:A, B, C, … Z
  • simp-chinese-formal:壹,贰,叁...
  • cjk-ideographic:一,二,三...

更多样式:

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
 

 

 

 

 


 

 

 

 

 

 

 

posted @ 2015-05-11 19:49  Demoworld  阅读(769)  评论(0编辑  收藏  举报