详解css counter有关特性学习培训

日期:2021-03-01 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

css counter特性被基本上全部访问器(包含IE8)适用, 可是却不常应用, 这篇文章内容就带大伙儿学习培训掌握下这些特性

COUNTER-RESET

明译为计数赏识置。形如: counter-reset: counter-name

普遍写法为

/* Set counter-name to 0 */
counter-reset: counter-name;

/* Set counter-name to ⑴ */
counter-reset: counter-name ⑴;

/* 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 ⑴;

/* Increment counter1 by 1, and decrement counter2 by 4 */
counter-increment: counter 1 counter2 ⑷;

在应用 counter-increment 以前 大家务必先应用 counter-reset 在其父元素原始化1个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 的英语的语法相近

第1位 <custom-ident> 表明实际counter标志

能够是a-z 0⑼ _ - 组成的单词 但不可以是重要字none, unset, initial, or inherit

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS3 三d炫酷立方体转换动漫的完成 返回下一篇:没有了