CSS计数器:counter
2016-07-23 17:28
411 查看
最近的需求,明星字体销售排行榜中,需要对字体的销售情况进行排序。
在早期,只有ol和ul可以对子元素li进行排序;如果不使用这两个标签,就由前台开发去手动填写序号。
当然,在这个需求中,数据不是实时更新的,手动填写序号并不是太麻烦。但是,像在线人数排行榜这些需要实时更新排名的页面,无论是插入新数据还是删除数据,都会涉及到后面数据序号变动。这样子就需要遍历后面的数据并逐条修改,增加浏览器的负担。
就想到CSS中的计数器counter这一属性,它可以对指定的元素进行自动排序。在CSS2.1规范中就加入了counter这一属性,配合伪元素:before、:after中的content使用,显示计数器的内容。
CSS计数器包括了counter-reset、counter-increment、content三个属性、counter() 函
数,以及伪元素:before、:after。
语法说明:
counter-reset:identifier [integer]。
默认值为none
indetifier:自定义的计数器名称,必选;
integer:计数器起始值,默认为0,可选;若设置值为0,则从1开始计数;
功能:用来标识计数器的作用域。可以包含多个计数器标识符
效果图:
counter-increment:identifier [integer]。
默认值为none
indetifier:counter-reset中声明的计数器标识符,必选;
integer:整数值,序号变化的间隔,正值则递增变化,负值则递减变化,也可为0;默认为1,可选;若设置值为2,且counter-reset中设置为0或未设置integer,元素序号为2、4、6 以此类推;
功能:用来标识计数器及其元素序号变化规则。
counter():配合content使用,接受两个参数,用逗号分隔。
第一个参数:counter-increment中定义的计数器标识符;
第二个参数:计数器风格,类似于list-style-type。
兼容性
在CSS2.1就被加入了规范,这一属性实用性很强,各大浏览器已经都支持,可以放心使用啦^_^
在早期,只有ol和ul可以对子元素li进行排序;如果不使用这两个标签,就由前台开发去手动填写序号。
当然,在这个需求中,数据不是实时更新的,手动填写序号并不是太麻烦。但是,像在线人数排行榜这些需要实时更新排名的页面,无论是插入新数据还是删除数据,都会涉及到后面数据序号变动。这样子就需要遍历后面的数据并逐条修改,增加浏览器的负担。
就想到CSS中的计数器counter这一属性,它可以对指定的元素进行自动排序。在CSS2.1规范中就加入了counter这一属性,配合伪元素:before、:after中的content使用,显示计数器的内容。
CSS计数器包括了counter-reset、counter-increment、content三个属性、counter() 函
数,以及伪元素:before、:after。
语法说明:
counter-reset:identifier [integer]。
默认值为none
indetifier:自定义的计数器名称,必选;
integer:计数器起始值,默认为0,可选;若设置值为0,则从1开始计数;
功能:用来标识计数器的作用域。可以包含多个计数器标识符
效果图:
counter-increment:identifier [integer]。
默认值为none
indetifier:counter-reset中声明的计数器标识符,必选;
integer:整数值,序号变化的间隔,正值则递增变化,负值则递减变化,也可为0;默认为1,可选;若设置值为2,且counter-reset中设置为0或未设置integer,元素序号为2、4、6 以此类推;
功能:用来标识计数器及其元素序号变化规则。
counter():配合content使用,接受两个参数,用逗号分隔。
第一个参数:counter-increment中定义的计数器标识符;
第二个参数:计数器风格,类似于list-style-type。
兼容性
在CSS2.1就被加入了规范,这一属性实用性很强,各大浏览器已经都支持,可以放心使用啦^_^
相关文章推荐
- CSS行高——line-height
- QGraphicsSimpleTextItem和QGraphicsTextItem区别
- css3 动画
- css元素隐藏原理及display:none和visibility:hidden
- 单页日历
- CSS Display(显示)和visibility(可见性)
- CSS笔记(〇):元素居中
- css2基础知识梳理
- css分组合嵌套选择器
- sublime text3 css3前缀自动补充插件
- CSS关于 Border(边框)使用的主要的问题和知识点补充
- css的绝对定位与相对定位
- css3技巧之背景渐变
- css3 media媒体查询器用法总结
- CSS实现不同的图形(三角形、正方形、圆形、平行四边形)
- CSS中调用JS函数和变量
- CSS样式设置小技巧
- CSS文本和div垂直居中方法总结
- css关于文本缩进text-indent属性
- 【CSS3】transition过渡和animation动画