定义和用法
: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
选择器仍然胜出,这要归功于它更高的优先级!文章来源:https://www.toymoban.com/news/detail-851975.html
使用 CSS 自定义属性在全局级别创建变量:文章来源地址https://www.toymoban.com/news/detail-851975.html
: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);
}
到了这里,关于CSS中:root伪类的说明和使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!