css变量+计数器

CSS变量

css中我们可以统一设置 变量 方便页面维护

声明:

变量声明的时候，变量名之前加上两根连词线（–）即可。例如：

body {
    
     
 --foo: #7F583F; 
 --bar: #F7EFD2; 
} 

变量使用: var()函数

var函数就是用来读取变量的

color: var(--foo);

var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。并且，第一个参数后面的全部算第二个参数，不管有多少个逗号

var(--font-stack, "Roboto", "Helvetica"); 
var(--pad, 10px 15px 20px); 

另外， var() 函数也可作为其他变量的值，但也仅作为其他变量的值使用：

--logo-text: var(--primary-color); 

变量作用域

css变量遵从 css优先级的原则 变量值会被覆盖

CSScontent计数器

CSS 计数器通过一个变量来设置，根据规则递增变量。

使用计数器自动编号

属性 :

• counter-reset - 创建或者重置计数器
• counter-increment - 递增变量,递增一个或多个值
• content - 插入生成的内容,使用 ::before 和 ::afte 伪元素来插入自
  动生成的内容
• counter() 或counters()函数 - 将计数器的值添加到元素

counter-reset

定义计数器的名称,可以同时定义多个计数器,定义数字时代表为初始值,默认为0

div.count{
    
    
    counter-reset: count1 count2;
}/* 如上,定义两个计数器count1和count2,初始默认为0

counter-increment

该属性接收两个参数，第一个参数代表计数器的名称，第二
个代表每次递增的值，初始时默认为1

counter-increment: count1 1;

初始值为0+1

counter()/counters()

该方法为计数器调用方法，接收两个参数，第一个参数为计
数器名称，第二个为数值类型

counters(mycounter, ".");

那么如何使用content调用计数器呢，如下所示：

比如我们利用伪类将某些内容添加在某元素前面

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