css counter属性被几乎所有浏览器(包括IE8)支持, 但是却不常使用, 这篇文章就带大家学习了解下这些属性
COUNTER-RESET
明译为计数器重置。形如: counter-reset: counter-name
常见写法为
/* Set counter-name to 0 */ counter-reset: counter-name; /* Set counter-name to -1 */ counter-reset: counter-name -1; /* Set counter1 to 1, and counter2 to 4 */ counter-reset: counter1 1 counter2 4;
用于在某个元素上重置counter
COUNTER-INCREMENT
couter-increment 明译为计数器重置
常用写法为
/* Increment counter-name by 1 */ counter-increment: counter-name; /* Decrement counter-name by 1 */ counter-increment: counter-name -1; /* Increment counter1 by 1, and decrement counter2 by 4 */ counter-increment: counter 1 counter2 -4;
在使用 counter-increment 之前 我们必须先使用 counter-reset 在其父元素初始化一个counter
例如:
// parent element has a counter-reset // applied to instantiate it section { counter-reset: unicornCounter; } // specify the child element being counted section h1 { counter-increment: unicornCounter; }
在上面的代码里 section的每一个h1元素 将会被设置counted值1
css语法规则
COUNTER-RESET 和 COUNTER-INCREMENT 的语法类似
第一位 <custom-ident> 表示具体counter标识
可以是a-z 0-9 _ - 组合的单词 但不能是关键字none, unset, initial, or inherit
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
这是一款基于HTML5的3D水波动画特效,它的效果非常逼真,我们可以按G键来让水池...
可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析...
这是来自于Steven D编写的WEB前端开发设计要点的内容。 虽然许多设计师已非常熟...
细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,...
1、基本使用 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=view...
音频 Airtime - Airtime 是一款用于调度和远程站点管理的开放广播软件 Ardour - ...
新手在div+css开发的时候,需要命名css伪类名称,如.ggg,#ccc,这样的格式。但...
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问...
我们总在关注从0到1的创新,其实从1到N的创新也同等重要,这是同一趋势下的两次...
填充颜色 艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力。 ...