说到做网页设计，你们知道CSS很重要吗？它就是控制网站样子的大神，从样式到布局一手包办。要学好这门课，首要任务就是学会怎么用伪类选择器，特别是那个叫做:root的标签，今天我就来教大家如何巧妙地运用它选中文档的根元素，还准备了实用的案例给大家参考~
理解:root伪类选择器
瞅见了没？根节点伪选择器，其实就选文件最开头那个部分（多半是html）呗。不过得留心，要是文件有命名空间啥的，随便挑个大的就行。举个例子，你想用这个东东改下整个文件的样式，可得当心了，整个文件的东西可都会跟着变！
接下来，咱们就来学习下这个叫“root”的伪类选择器还有它那些高级玩法！
基本用法示例
悄悄告诉你，这儿有个小窍门，能让你更轻松地学会如何使用强大的`root`伪类选择器来装饰文档中的大大的爸爸（根元素）~
css
:root{
font-size:16px;
color:#333;
}
:root {
font-size: 16px;
color: #333;
}
搞定！选好文档头，文章字号设置为16像素黑色字体（#333），瞬间舒服不少，统统都变了！
声明全局变量
来点新鲜的，不只是教你们如何做样式。其实还有更简便的方法，利用:root伪类，可以设置全局变量，整个表格都会受影响！给大家举个实例，看看效果吧：
–primary-color:#FF0000;
body{
背景颜色就是你上次设置的那个–主色。
h1{
color:var(–primary-color);
其实，很简单！首先，咱们在’:root’这个伪类选手里设了个“–primary-color”的全局变量，值就是咱喜欢的#FF0000。然后，把这颜色变成了body元素的背景色，也作为h1元素字儿的颜色。这样一来，咱们就可以轻而易举地统一网页风格，不再没头绪地敲代码
高级用法
:root {
--primary-color: #FF0000;
}
body {
background-color: var(--primary-color);
}
h1 {
color: var(--primary-color);
}
你们知道？有个}:root伪类，就再也不用费劲心思地声明全局变量了！更神奇的是，它还可以和各种选择器搭配使用，选样式超级自由！像我这样的小白，都能把它和媒体查询结合起来，根据屏幕大小变换样式！
当你的屏幕宽度小于等于768像素时，它会这么做。
:root{
font-size:14px;
}
平板/电脑屏幕宽度大于等于768像素时，启用以下样式：
font-size:16px;
这次我们只弄了两次媒体查询就搞定了两个屏幕大小，每个查询的根元素字体还不一样哟。无论你用啥儿设备看，一定都看得爽翻天！
总结
读完这篇文章，你会清楚Root伪类是咋回事儿！简直就是装修房子的高手，可以随意改变文档里的根元素外观。之前学的那点基本功，比如用锤子砸钉子和设置全局变量，都不算啥了。想知道更多高级玩法？那就赶快学起来！学会Root伪类，不仅能解决样式问题，还能直接设定全局变量，让你的样式表变得更加得心应手，随心所欲！
你有试过root伪类吗？有时候它会让你的css看着怪怪的对不？不如来评论区和大家分享下你的想法呗！
评论0