css 中的变量 |css判断是否存在标签

:root {
--main-color: #036379; /*定义变量*/
}
.navbar {
background-color: var(--main-color); /*使用变量*/
}

如上面这个例子，大家用:root定义了一个变量main-color，将其值设置为#036379。接着，大家在.navbar的background-color属性里使用了var()函数来调用这个变量。这样，.navbar的背景颜色就会变成#036379。如果想要修改颜色，只需要改变变量的值，那么整个站点的颜色也就修改了。

除了颜色，大家可以使用变量来定义一些尺寸，比如字体大小，padding等等。另外，变量也可以互相引用，甚至可以计算。

:root {
--card-width: 300px;
--card-height: calc(var(--card-width) * 0.75); /*计算变量*/
}
.card {
width: var(--card-width); /*使用变量*/
height: var(--card-height);
}

如上例，大家定义了两个变量，一个是卡片的宽度card-width，另一个是卡片的高度card-height。card-height的值通过calc()函数来计算，它是card-width的75%。最后，大家在.card的宽高属性里使用了这两个变量。

总的来说，CSS中的变量，让大家的样式更加优雅，更加易于维护。但是需要注意，在一些加强版的浏览器中才支持变量这个特性。所以，需要在应用中进行兼容性的考虑。