学习
实践
活动
专区
工具
TVP
写文章

CSS基础(三)-counter

计数器这个属性可以用来自动排版段落,段落样式种类很多且支持自定义。

1.counter-reset:定义计数器,包括初始值,作用域等,display: none时失效.用法:counter-reset: counterName1 0 counterName2 0 ...

2.counter-increment:设置计数器的增数,用法:counter-increment(counterName) | counter-increment(counterName, step)[step可以为负数]

3.counter():调用计数器。在CSS2.1中counter()只能被使用在content属性上counter(counterName) | counter(counterName, list-style-type) 。list-style-type: 种类很多可以试试,例如:罗马字,希腊符号,希腊字母,大小写数字,天干地支等 。

4.元素display: none的元素不参与计数,使用visibility:hidden参与计数5.@counter-style: 可以自定义counter的类型,有兴趣的同学可以试试

使用步骤:

设置计数器名称和初始值: counter-reset

设置增数,可以是负数: counter-increment

调用计数器并设置样式: counter()

源代码:

效果图:

github链接:https://github.com/JoeSmile/CSS-Test中的cssBasic3.html

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180515G09RGR00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券