定义和用法
:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素,所以也可以把:root理解为html根元素选择器,但是比html根元素的优先级高,:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式。CSS :root 选择器 | CSS 参考手册
定义全局变量
你可以使用:root
来定义一个全局的字体大小:
css:root {--font-size: 16px; // 定义CSS变量;box-sizing:border-box;// 代码中所有盒模型的边框向内挤压
}
在其他的CSS规则中,你就可以引用这个字体大小变量:
cssbody {font-size: var(--font-size);
}
作为伪类选择器,它比标签选择器具有更高的优先级:
:root {background-color: blue;color: white;
}html {background-color: red;color: white;
}
尽管 html
选择器出现在后面,:root
选择器仍然胜出,这要归功于它更高的优先级!
使用 CSS 自定义属性在全局级别创建变量:
:root {margin: 0;padding: 0;--primary-color: #0000FF;--body-fonts: "Helvetica", "Arial", sans-serif;--line-height: 1.5;
}p {color: var(--primary-color);font-family: var(--body-fonts);line-height: var(--line-height);
}