持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
今天我们来讲讲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()
该方法为计数器调用方法，接收两个参数，第一个参数为计 数器名称，第二个为数值类型
兼容问题
邀请用户升级浏览器
比较普遍而且比较简单的问题,但对用户的体验感不太友好，
meta强制解析模式
x-ua-compatible 用来指定IE浏览器解析编译页面的mode
最实用写法目前:
<meta http-equiv="x-ua-compatible" content="IE=Edge,Chrome=1">
对多核浏览器
<meta name="renderer" content="webkit"> </meta>
<meta name="renderer" content="ie-comp"> </meta>
<meta name="renderer" content="ie-stand"> </meta>
兼容查询
你可以在下面的链接，查询各种不兼容情况的解决方法
