资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用 CSS 计数器

使用 CSS 计数器

guqiu / 1144人阅读

摘要：使用计数器计数器本质上是维护的变量，这些变量可以根据规则增加以跟踪使用次数。有网友利用计数器制作文档的列表序号排序，也有网友利用计数器伪类元素制作更华丽的效果。使用计数器语法命名变量并定义计数器的值，默认为。注意计数器只跟属性使用才有效。

使用 CSS 计数器

CSS 计数器本质上是 CSS 维护的变量，这些变量可以根据 CSS 规则增加以跟踪使用次数。

那么关于 CSS 计数器的使用，就需要读者智者见智了。有网友利用计数器制作文档的列表序号排序，也有网友利用计数器 + 伪类元素制作更华丽的效果。

使用计数器 语法

1.命名变量并定义计数器的值，默认为 0。

</>复制代码 
  1. counter-reset: varname;

递增计数器的值，默认增量为 1。

</>复制代码 
  1. counter-increment: varname;

counter() / counters() 方法显示计数。

</>复制代码 
  1. counter(varname);
注意 
</>复制代码 
  1. CSS 计数器只跟 content 属性使用才有效。
相关用法 如何自定义 counter-reset 默认值 
</>复制代码 
  1. counter-reset: varname number;
</>复制代码 
  1. 允许设置为负值，也允许设置为小数（ 仅 Chrome 支持）。同时，也支持多个变量同时定义：
</>复制代码 
  1. counter-reset: varname1 number varname2 number varname3 number;
参考代码 点击按钮计数

HTML

</>复制代码 
  2.     
  3.     
  4.     
  5.

CSS

</>复制代码 
  1. .box
  2. {
  3.     counter-reset: num;
  4. }
  5. input:checked
  6. {
  7.     counter-increment: num;
  8. }
  9. input:checked:before
  10. {
  11.     content: counter(num);
  12. }
文章序号自动递增

HTML

</>复制代码 
  2.     
    文章目录标题1
  3.     
    文章目录标题2
  4.     
    文章目录标题3
  5.     
    文章目录标题4
  6.     
    文章目录标题5

CSS

</>复制代码 
  1. .box
  2. {
  3.     counter-reset: num;
  4. }
  5. h1
  6. {
  7.     counter-increment: num;
  8. }
  9. h1:before
  10. {
  11.     content: counter(num);
  12. }
文章序号嵌套递增

HTML

</>复制代码 
  2.     
    文章目录标题
  3.         
    文章目录副标题
  4.     
    文章目录标题
  5.         
    文章目录副标题
  6.         
    文章目录副标题
  7.     
    文章目录标题
  8.         
    文章目录副标题
  9.         
    文章目录副标题
  10.         
    文章目录副标题
  11.     
    文章目录标题
  12.         
    文章目录副标题
  13.         
    文章目录副标题
  14.         
    文章目录副标题
  15.         
    文章目录副标题
  16.     
    文章目录标题
  17.         
    文章目录副标题
  18.         
    文章目录副标题
  19.         
    文章目录副标题
  20.         
    文章目录副标题
  21.         
    文章目录副标题

CSS

</>复制代码 
  1. .box
  2. {
  3.     counter-reset: num;
  4. }
  5. h1
  6. {
  7.     counter-reset: subnum;
  8.     counter-increment: num;
  9. }
  10. h1:before
  11. {
  12.     content: counter(num);
  13. }
  14. h2
  15. {
  16.     counter-increment: subnum;
  17. }
  18. h2:before
  19. {
  20.     content: counter(num)"."counter(subnum);
  21. }
结语

在上面的案例及分享中，其实讲到的东西非常少。想要更深了解 CSS 计数器的读者，可以阅读张鑫旭先生这篇《CSS counter计数器(content目录序号自动递增)详解》。

GPU云服务器 云服务器 css使用 css的使用 css如何使用 怎么使用css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115870.html

相关文章

  • 如何使用纯 CSS 制作四子连珠游戏

    摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。 序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

    I_Am 评论0 收藏0

  • 如何使用纯 CSS 制作四子连珠游戏

    摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。 序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

    waltr 评论0 收藏0

  • 伪元素 ::after 和 ::before 应该这么用（一）

    摘要：伪元素被当做的样式来进行展现，用法和普通的元素用法是一样的。中的伪元素使用个冒号，在中，为了区分伪类和伪元素，规定伪元素使用个冒号。伪元素的特点优点不占用节点，减少节点数。不仅块级元素可以设置伪元素，大部分行级元素也可以。 1 什么是伪元素？ CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS ...

    BlackMass 评论0 收藏0

  • 带你了解css计数器——counters

    摘要：语法格式，中的是和中元素所支持的的值，也就是你可以将显示为罗马数字则是表示可以使用指定的字符串将计数器连接起来。 第一次了解到这个css是因为代码高亮-prismj中行号显示的实现。 showImg(https://segmentfault.com/img/remote/1460000011457180?w=348&h=244); 当时很好奇前面的行号是如何实现的，一探究竟原来非常简单...

    fuyi501 评论0 收藏0

  • CSS魔法堂：一起玩透伪元素和Content属性

    摘要：前言继上篇魔法堂稍稍深入伪类选择器记录完伪类后，我自然而然要向伪元素伸出魔掌的啦。和的注意事项默认必须设置属性，否则一切都是无用功默认，就是和的内容无法被用户选中的伪元素和伪类结合使用形如。 前言  继上篇《CSS魔法堂：稍稍深入伪类选择器》记录完伪类后，我自然而然要向伪元素伸出魔掌的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！ ...

    DevTalking 评论0 收藏0

发表评论

登陆后可评论

0条评论

guqiu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<