CSS中:root伪类的说明和使用

本文主要是介绍CSS中:root伪类的说明和使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

定义和用法

: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);
}

这篇关于CSS中:root伪类的说明和使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---