css3的counter使用

前篇说怎么通过counter计数器来实现类似ul的的效果.

复习一遍:
counter-reset:i ,相当于js 的var i,初始化的位置.

counter-increment:,计一次数,相当于i++ ;

content:counter(i),相当于 write(i)

counter-reset

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-reset

counter-reset不是必须的,只是避免变量污染,重置.

语法:
计数器名:以a-z+数字不区分大小写,不能单独数字.
数值:十进制纯数字,可以是正数,负数

1. 一对

counter-reset: 计数器名 初始值(默认为0);

2 . 忽略值

counter-reset: 计数器名;

3. 同时定义多个计数器

counter-reset: 计数器A 数值A 计数器B 数值B;

以空格隔开,数值可以忽略.
e.g:

.main {
    counter-reset: page section 1 part;
}

上面例子,page=0,section=1,part=0;

counter-reset 一般定在父级元素定义,如ul,ol,避免在第1个元素使用. 因为元素位置调整,删除后导致计数器不准确.

counter-increment

css解析器从头到尾遍历元素,每匹配一次自增一次.

语法:

1. 一个计数器

counter-increment: 计数器名 值(默认+1);

值: 可以是正数,也可以是负数.
可以忽略值,忽略+1

2. 多个计数器

counter-increment: 计数器A 值A 计数器B 值B

counter-set (x)

和counter-reset 一样,设置一个值. counter-reset在没有定义计数器,定义一个,已定义就在重置.
counter-set 是设置一个值.

但是部分浏览器不支持,如苹果浏览器. 为了兼容性,大家都使用counter-reset.

counter()函数

counter()函数返回当前的计数器的值.
语法:

1. 简单的返回:

   counter(计数器名)

   返回: 数值

2. 指定转换类型

   counter(计数器名,转换类型);

   参考:
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type

如: 转换成字母 'a,b,c,d'

.li {
 content: counter(my-rank,low-alpha)
}

counters()

用在嵌套列表中. 和counter()类似返回计数器对应的字符串.

语法:

counters(计数器名,分隔符,转换类型)

例:

.page {
    counter-reset: section 0;
}

section {
    counter-increment: section;
}

section::before {
    content: counters(section, '.') '. ';
    color: gray;
    font-size: 14px;
}

下一篇,再说一下 counter-type的样式和自定义样式.

原作者:阿金
本文地址：https://hi-arkin.com/archives/counter-css-2.html