变量var函数(二十三)

变量使用：var() 函数

var() 函数是用来读取变量，如下例：

a {
    --foo：#f1f2f5;
    --bar: red;
    color: var(--foo);
    text-decoration-color: var(--bar);
}

var()函数也可作为其他变量的值使用.

变量作用域

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

html {
   --color: blue;
 }
div {
   --color: green;
   }
* {
  --color: var(--color);
}    变量--color 最终的颜色是green

CSS content 计数器

css计数器通过一个变量来设置,根据规则递增变量.

使用计数器自动编号

属性有:

• counter-reset: 创建或者重置计数器
• counter-increment 递增变量
• content 插入生成内容.
• counter()或counters()函数,将计数器的值添加到元素.

要使用css计数器,得使用counter-reset创建:

div.count {
  counter-reset: count1 count2;
}
/* count1和 count2 是计数器名称 自定义命名,默认值为0*/

div.count:before {
   counter-increment: count1 2;
} 
/*定义计数器count1默认初始值为0+2=2;   若将数字2省略,则默认计数器初始值为0+1=1*/

counter()和counters()为计数器调用方法.两个参数,第一个参数表示计数器名称,第二个表示数值类型.

cursor 鼠标指针样式

可以通过设置cursor 给元素添加鼠标移入时的样式

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。