css 变量名 |css div 悬浮

:root {
--main-color: #FF0000;
--secondary-color: #00FF00;
--font-size: 16px;
}
.h1 {
color: var(--main-color);
font-size: var(--font-size);
}
.p {
color: var(--secondary-color);
}

如上代码所示，大家可以通过在:root伪类中定义变量名，并使用var()函数来调用这些变量名。这样，当大家需要更改颜色或者字体大小时，只需要在:root中修改变量名对应的值即可，所有依赖这些值的地方都会随之改变。

另外，使用CSS变量名还能帮助大家更好地实现主题切换功能。例如，当大家需要为网站添加夜间模式时，只需将主色调等变量改为夜间模式对应的值，即可实现整个网站的颜色切换，而无需逐个修改CSS。

除此之外，CSS变量名还有其他一些好处，例如可读性更高、可维护性更强、减少代码冗余等等。但需要注意的是，CSS变量名并不是所有浏览器都支持的。目前支持变量名的浏览器包括Chrome、Safari、Opera、Microsoft Edge以及Firefox。