CSS3知识汇总9

这两天晚上都要加班，实在没时间写简书了，就把之前学习的先贴上吧。等春节时，要继续好好学习。多读书，只有自己能力强了，才不会被人瞧不起。

【计数器】

包括3个语句：

定义计数器counter-reset、

计数器累加counter-increment、

读取content:counter(n)

注：

1.子元素既然是一组元素，它们一定是属于同一个父容器的，变量声明语句counter-reset要定义在容器中

2.变量累加语句counter-increment要写在子元素中，也就是每多一个子元素就会令计数器加1

3.因为计数器的值必须用content:counter()读出，而content属性是专门用于伪元素的，所以必须在伪元素中读取计数器的值

4.counter-reset默认值是0，如设置为10，就从11开始计数

5.计数器累加可以接收一个参数表示步长，所谓步长就是每次累加时要间隔几个数

如把步长设置为3，则计数器生成的数列就会从3开始，接下来是6、9、12

.container{counter-increment:n 3;}

步长可为负值，如计数器的初始值是11，步长为-1，则生成的数为10、9、8...

.container{counter-reset:n 11}

.container div{counter-increment:n -1}

.container{

    display: flex;

    justify-content: space-between;

    counter-reset: n;

}

.container div{

    width: 3em;

    height: 3em;

    background-color: royalblue;

    border-radius: 50%;

    position: relative;

    counter-increment: n;

}

.container div::before{

    content:'x';

    position: absolute;

    font-size: 1.5em;

    font-family: sans-serif;

    width: inherit;

    line-height: 2em;

    text-align: center;

    color:white;

    content:counter(n, var(--list-type))

}

.container:nth-child(1){

    --list-type:upper-roman

}

.container:nth-child(2){

    --list-type:trad-chinese-formal

}

.container:nth-child(3){

    --list-type:trad-chinese-informal

}

.container:nth-child(4){

    --list-type:hiragana

}

.container:nth-child(5){

    --list-type:korean-hangul-formal

}