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扫描二维码关注公众号,回复: 14381425 查看本文章
counter-increment: count1 1;
初始值为0+1
counter()/counters()
该方法为计数器调用方法,接收两个参数,第一个参数为计
数器名称,第二个为数值类型
counters(mycounter, ".");
那么如何使用content
调用计数器呢,如下所示:
比如我们利用伪类将某些内容添加在某元素前面
li{
counter-reset:count1;
counter-increment: count1;
}
li::before{
content: counters(count1, ".") " ";
}