关于CSS计数器的精讲

CSS的计数器就像一个变量,它提供了简单的计数功能,可以在页面上显示结果,在早期的网站上被广泛使用。 要实现计数器,必须具有以下属性:

  • counter-reset:创建或者重置计数器;
  • counter-increment:递增变量;
  • content:插入生成的内容;
  • counter() 或 counters():将计数器的值添加到元素。

下面我们就来看一下 CSS 中的计数器是如何使用的。

初始化计数器

要使用计数器首先需要使用 counter-reset 属性来创建一个计数器,这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下:

counter-reset:none | [<identifier> <integer>]

参数说明如下:

  • none:阻止计数器复位;
  • <identifier>:定义计数器的名称;
  • <integer>:定义计数器的起始值,默认值为 0,可以为负值。

计数器自增

初始化计数器后,可以通过 counter-increment 属性来指定计数器何时自增,语法格式如下:

counter-increment:none | [<identifier> <integer>]

参数说明如下:

  • none:阻止计数器增加;
  • <identifier>:定义要自增的计数器名称;
  • <integer>:定义计数器每次增加的数值,默认值为 1,可以为负值。

显示计数器

最后,就是如何显示计数器了。要显示计数器您可以使用 counter() 或 counters() 函数,这两个函数的语法格式如下:

counter(name)
counters(name, string, list-style-type)

参数说明如下:

  • name:计数器的名称;
  • string:当计数器嵌套使用时,用来拼接的字符串;
  • list-style-type:计数器显示的风格,可以是 CSS 中允许的任何《list-style-type 属性》的值。

下面通过一个简单的示例来演示计数器的使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. counter-reset: chapter;
  7. }
  8. h5, h6 {
  9. margin: 5px 0 5px;
  10. }
  11. h5 {
  12. counter-reset: section;
  13. counter-increment: chapter;
  14. }
  15. h6 {
  16. counter-increment: section;
  17. }
  18. h5:before {
  19. content: “Chapter ” counter(chapter) “. “;
  20. }
  21. h6:before {
  22. content: counter(chapter) “.” counter(section) ” “;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <h5>程序设计语言</h5>
  28. <h6>HTML and CSS</h6>
  29. <h6>JavaScript</h6>
  30. <h6>PHP</h6>
  31. <h6>Java</h6>
  32.  
  33. <h5>数据库管理系统</h5>
  34. <h6>MySQL</h6>
  35. <h6>MariaDB</h6>
  36. <h6>PostgreSQL</h6>
  37. <h6>Oracle</h6>
  38. </body>
  39. </html>

运行结果如下图所示:

1523236095-0
图:计数器

注意:在使用 CSS 计数器之前,必须使用 counter-reset 创建计数器。

计数器嵌套

另外,计数器还可以嵌套使用,而且使用 counters() 函数可以在不同级别的嵌套计数器之间插入一个字符串,如下例所示:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ol {
  6. /* 为每个ol元素创建新的计数器实例 */
  7. counter-reset: ol-list;
  8. list-style-type: none;
  9. }
  10. li:before {
  11. /* 只增加计数器的当前实例 */
  12. counter-increment: ol-list;
  13. /* 为所有计数器实例增加以“.”分隔的值 */
  14. content: counters(ol-list, “.”) “、”;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <ol>
  20. <li>item</li>
  21. <li>item
  22. <ol>
  23. <li>item</li>
  24. <li>item</li>
  25. <li>item
  26. <ol>
  27. <li>item</li>
  28. <li>item</li>
  29. </ol>
  30. </li>
  31. <li>item
  32. <ol>
  33. <li>item</li>
  34. <li>item</li>
  35. <li>item</li>
  36. </ol>
  37. </li>
  38. </ol>
  39. </li>
  40. <li>item</li>
  41. <li>item</li>
  42. </ol>
  43. </body>
  44. </html>

运行结果如下图所示:

152323L32-1
图:计数器嵌套
© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片