【CSS】伪类选择器 :root 声明全局CSS变量
语法
<style>
:root {
/* ... */
}
</style>
这个 CSS 伪类 :root 匹配文档树的根元素，表示选中
<html>元素，除了优先级更高之外，与 html 选择器相同
<style>
/* 选中文档的根元素（HTML 中的 <html>） */
:root {
background: yellow;
}
</style>
效果:
声明全局 CSS 变量
用
--开头自定义样式变量名，只要当前页面引用了:root所在的文件，都可以使用var()来引用
<style>
:root{
--main-color: #daa9ff;
--width: 200px;
--height: 100px;
}
div{
/* var() 函数可以代替元素中任何属性中的值的任何部分，var() 函数不能作为属性名、选择器或者其他除了属性值之外的值 */
background-color: var(--main-color);
width: var(--width);
height: var(--height);
}
</style>
<div></div>
效果:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root
原文地址：https://blog.csdn.net/qq_57567877/article/details/142340291
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！