本文介绍了：root选择器在CSS中的应用，它用于匹配文档的根元素，通常在HTML中是。：root选择器的优先级高于直接对html的选择，并可以用来声明全局CSS变量。通过var()函数，我们可以方便地在样式中调用这些变量，实现颜色、字符串和数值的动态控制。此外，var()函数还支持默认值，当调用的变量不存在时会使用默认值。
：root选择器能做什么，它能匹配元素所在文档的根元素，而在HTML文档中，根元素始终是<html>.，但是：root的优先级高于在css中直接对html操作。
也就是说对：对：rot操作就相当于对根元素<html>操作，比如改背景色：
html {
background-color: rgb(212, 209, 9);
}
:root {
--primary-color: #ff434f;
--secondary-color: #e3e3e3;
--text-color-darker: #2e2e2e;
background-color: rgb(190, 26, 26);
}那有同学要问了，就这么点用处，能叫妙用吗？细心的同学已经看到，：root里面的自定义变量了。
没错，我们可以在：root里面声明css全局变量，变量的声明对大小写敏感，且需要在被声明的变量前加上"--",且变量只能作为属性值，不能作为属性名！
既然声明了css全局变量，我们就得调用它，通过var（）函数调用:
html {
background-color: rgb(212, 209, 9);
}
:root {
--primary-color: #ff434f;
--secondary-color: #e3e3e3;
--text-color-darker: #2e2e2e;
background-color: rgb(190, 26, 26);
}
div {
width: 500px;
height: 500px;
background-color: var(--secondary-color);
}
body {
background-color: var(--text-color-darker);
}background-color: var(--secondary-color,#ff434f);var（）也可以有第二个参数，表示默认值，如果调用的变量不存在则使用默认值。
别以为var（）的妙用就只有定义颜色，它还能定义字符串和数值：
--hello:'hello';
--max:1920px;
--marigin:30px 20px 40px;
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
