css中的变量和辅助函数
变量
--name 两个破折号加变量名称（可以在当前的选择器内定义）var(--*)
命名规则
body {
--深蓝: #369;
background-color: var(--深蓝);
}变量值只能做用属性值，不能用做属性名。变量命名不能包含 $,[,^,(,% 等字符 普通字符局限在只要是数字[0-9]／字母[a-zA-Z]／_／-这些组合。 还能够是中文，日文或者韩文； 变量名大小写敏感， --blue 和 --Blue 是两个不一样变量。
使用语法
var(--name, [value1] )
第一个参数：引用的变量名称
第二个参数：回退值，表示如果第一个参数未定义，使用回退值代替
js控制css变量
获取css变量：getPropertyValue('--name')
设置css变量：setProperty('--name', value)
let dom = document.getElementById("header");
// 获取css变量
let color = dom.getPropertyValue("--bgColor").trim();
// 设置css变量
dom.setProperty("--bgColor", '#f34e25');函数
通常带 () 的都是函数表达
属性函数（慎用,用在伪元素）：attr()
attr(attrName, [ type, defaultValue]) - 第一个参数是html标签的属性名称；第二个参数是属性值的单位类型（例如string(默认)、number，但因为很多目前都处于试验阶段，因此基本都是string字符串类型）；第三个参数是默认值
理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的
兼容性也很是的好，IE8+都是能够完美支持这个属性的
值处理函数：calc()
calc(表达式) - 表达式支持加、减、乘、除，可以使用不同维度的值计算
width: calc(2em + 16vh)值处理函数：min、max、clamp
min(val1... valN)：接受任意数量的参数，每个参数也可以是表达式。取出参数中最小的值。
max(val1...valN)：同上，取最大的值。
clamp(minVal, defaultVal, maxVal)：3个参数，分别是最小值，首选值，最大值。相当于将最终取值限制在一个范围内。
以上3个函数都具有响应式的功能，可以将不同维度的值用来比较
div {
width: min(10px, 8vh, 2em);
height: max(120px, 50vh);
max-height: clamp(20px, 50px, 100px);
}滤镜函数：filer()
filter: grayscale(1); 灰色效果--网站哀悼主题色就是用它，一行代码搞定
filter: blur(5px); 毛玻璃效果
等等
// css 版的 ps
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}计数函数：counter()
选择你想要吃的水果
苹果
橘子
柠檬
你一共选择了种水果
.box {
counter-reset: characters;
}
input:checked {
counter-increment: characters
}
.total {
position: relative;
padding-right: 10px;
}
.total:after {
position: absolute;
content: counter(characters);
}颜色函数：rgb()、rgba()
rgb(redValue, greenValue, blueValue)
接受3个参数，分别代表红、绿、蓝的色值。取值范围在0~255之间rgba(redValue, greenValue, blueValue, opacity)
接受4个参数，前三个与rgb的参数一致；最后一个参数是透明度，取值范围在0~1之间。
伪类选择器函数
:where()函数是一个高级的伪类选择器，他的作用是将一系列的选择器列表，都应用相同的样式，简化多个选择器样式编码的流程。
:where(class1,...classN) { css样式 }- 接受n个参数，参数值为选择器（任意的css选择器）
可以把:where选择当成普通的选择器一样，和其他选择器组合使用，比如放在中间、开头、或者结尾。
// 传统方式
.main span {
font-size: 12px;
}
.line span {
font-size: 12px;
}
// 如果有大量样式相同，选择:where函数选择器
:where(.main, .line) span {
font-size: 12px;
}
// 组合使用
div :where(.main, .line) span {
font-size: 12px;
}:is()函数与:where()函数选择器用法一致。
:is()函数与:where()函数的区别：
优先级不同。:where()函数选择器的优先级总是为0（即使他的样式代码在最下面）
而:is()函数选择器的优先级取决于他的参数选择器列表中最高的选择器
li {
list-type-style: none;
}
:where(li) {
list-type-style: circle;
}
// 以上代码，li标签的样式仍为none，设置了li选择器的样式，:where()函数选择器的样式优先级最低
.main span {
font-size: 12px;
}
:is(.main) span {
font-size: 13px;
}
span {
font-size: 14px;
}
:where(.main) span {
font-size: 15px;
}
// 以上代码，由于都设置了span选择器的font-size样式，
// :where()优先级最低；其次是span选择器；
// 第一个选择器和:is()函数选择器的优先级都是.main span，因此他们优先级一致，但是因为is()函数在下面，因此font-size为13px。