css3中计数器的使用

更新日期: 2018-11-01阅读: 3.8k标签: css3

css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数

简而言之,计数器就是采用css给html元素自动生成编号。其本质上是由CSS维护的变量,其值可以通过CSS规则递增以跟踪它们的使用次数。

 

一、css计数器相关属性:

1.counter-reset 

定义计数器,包括初始值,作用域等;   值为计数器的名称。默认情况下,计数器从0开始。此属性还可用于将其值更改为任何特定数字。记住在必须在父节点初始化你需要的计数器,不然序号肯定是不对的。当元素display:none时,该属性失效。

它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:

counter-reset: count 0  /*标识计数器count从1开始*/
counter-reset: count2 2 /*标识计数器count2 从3开始*/
counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器,count1,count2,count3*/


2.counter-increment

用于可计数的元素中,设置计数器的增数;

他的值也包括两部分:第一个为计数器的名字,即counter-reset设置好的名字,第二个值标识递增的值(默认为1),比如: 

counter-increment: count 1 /*表明每次递增 1*/   
counter-increment:count 2 /*表明每次递增 2*/


3.counter()

content和counter需要搭配使用,content主要是跟 :after, :before,::after,::before来搭配用的,counter主要是给元素插入计数器的值。 语法如下:

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

name就是你计数器的名字。

string为在计数器之间的字符串。

list-style-type可以用来指定计数器的样式,比如可以用1,2,3,4来计数,也能用a,b,c,d来计数 。list-style-type样式如下:

disc:CSS1默认值。实心圆
circle:CSS1空心圆
square:CSS1实心方块
decimal:CSS1阿拉伯数字
lower-roman:CSS1小写罗马数字
upper-roman:CSS1大写罗马数字
lower-alpha:CSS1小写英文字母
upper-alpha:CSS1大写英文字母
none:CSS1不使用项目符号
armenianl:CSS2未支持。传统的亚美尼亚数字
cjk-ideographic:CSS2未支持。浅白的表意数字
georgian:CSS2未支持。传统的乔治数字
lower-greek:CSS2未支持。基本的希腊小写字母
hebrew:CSS2未支持。传统的希伯莱数字
hiragana:CSS2未支持。日文平假名字符
hiragana-iroha:CSS2未支持。日文平假名序号
katakana:CSS2未支持。日文片假名字符
katakana-iroha:CSS2未支持。日文片假名序号
lower-latin:CSS2未支持。小写拉丁字母
upper-latin:CSS2未支持。大写拉丁字母

例子:

content:"F." counter(counter);在计数器前面添加‘F.’
content:counter(counter,lower-alpha);  指定计数器的列表样式;
content:counters( counter  ,".") " ";   在计数器之间加点号,同时在计数器末尾加一个空格;
content:counters( counter  ,".",lower-roman) " ";定义计数器为小写罗马数字格式,同时加点号,空格;


二、css计数器例子  

创建计数器步骤:

第一步:声明计数器:要使用CSS Counters生成自动计数器,首先就是通过counter-reset属性先声明一个计数器名称。
第二步:设置计数器:counter-reset只是定义了一个计数器标识符,在实际使用中,需要通过counter-increment属性来控制计数器的增减。 
第三步:显示计数器:最后一步,就是如何显示计数器了。显示计数器需要通过:before、content和counter():来进行设置。 

html:

<ul>
  <li>List item</li>
  <li>List item</li>
  <ul>
    <li>List item</li>
  </ul>
</ul>

css:

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ': ';
}

效果如下:

  • List item
  • List item
    • List item


三、css计数器中常见问题

怎么让计数器倒序计数?         

只要把增量counter-increment为负数即可。 


怎么改变计数器的计数符号?        

counter()的默认样式为decimal,即数字。 

我们可以根据需要修改成其他样式,例如:upper-roman(罗马数字) 


计数器的兼容性?

目前主流浏览器基本都支持counter-reset属性。 

注意: 因为在IE6 和IE7 以及IE8的IE7兼容模式中,:before 和:after 都不被支持,所以可以认为它们都不支持content 属性,测试也就毫无意义,所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset属性


CSS计数器除了用来计数还有什么其他的作用?

CSS计数器对于生成大纲列表特别有用,因为计数器的新实例是在子元素中自动创建的。使用counters() 函数,可以在不同级别的嵌套计数器之间插入分隔文本。

除了生成篇数、章节和段落以外,CSS计数器还被应用于计算数据类型的小游戏当中。 


CSS计数器与display:none的使用会造成什么影响?

一个元素,如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性(针对支持浏览器),则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。

  

counter计数器能和ol、ul同时使用吗?

 counter计数器可以和ol、ul同时使用,符合起来还能达成复合序号的效果  


链接: https://www.fly63.com/article/detial/1246

CSS3 transform详解,关于如何使用transform

transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。

css3中样式计算属性calc()的使用和总结

在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

css3特效_CSS3弹跳Loading加载动画特效的实现

今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分不错。尤其在移动端中使用,基本代替了图片来实现加载的效果。

用CSS3实现无限循环的无缝滚动

使在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢;使用CSS来进行动画的展示,会让页面显得更加流畅。如果能用CSS实现,可以尝试尽量用CSS实现下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!