css中的变量和辅助函数_代码007(未授权)

本文介绍: 两个破折号加变量名称（可以在当前的选择器内定义）var(–*)

body {
    --深蓝: #369;
    background-color: var(--深蓝);
}

变量值只能做用属性值，不能用做属性名。变量命名不能包含 $,[,^,(,% 等字符普通字符局限在只要是数字[0-9]／字母[a-zA-Z]／_／-这些组合。还能够是中文，日文或者韩文；变量名大小写敏感， –blue 和 –Blue 是两个不一样变量。

let dom = document.getElementById("header");
// 获取css变量
let color = dom.getPropertyValue("--bgColor").trim();
// 设置css变量
dom.setProperty("--bgColor", '#f34e25');

通常带 () 的都是函数表达

<div class="main" bgColor="#ffffff" data-width="100px"></div>
 
<style>
.main {
  background: attr(bgColor);
  width: attr(data-width);
}
</style>

兼容性也很是的好，IE8+都是能够完美支持这个属性的

width: calc(2em + 16vh)

div {
    width: min(10px, 8vh, 2em);
    height: max(120px, 50vh);
    max-height: clamp(20px, 50px, 100px);
}

// css 版的 ps
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

<div class="box">
    <p>选择你想要吃的水果</p>
    <input type="checkbox" value="苹果"/>苹果
    <input type="checkbox" value="橘子"/>橘子
    <input type="checkbox" value="柠檬"/>柠檬
    <p>你一共选择了<span class="total"></span>种水果</p>
</div>


.box {
    counter-reset: characters;
}
input:checked {
    counter-increment: characters
}
.total {
    position: relative;
    padding-right: 10px;
}
.total:after {
    position: absolute;
    content: counter(characters);
}

// 传统方式
.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;
}

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。