CSS 中的 :root 伪类介绍

2023-02-28 09:25:25 浏览数 (1)

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

今天为大家介绍: css中的 :root 伪类的使用

1. :root 介绍

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同 mdn

2. :root的应用场景

应用1：类似html 选择器, 指定样式

代码语言：javascript复制

/* 选择文档的根元素（HTML中的 <html>） */
:root {
  background: yellow;
}

应用2：申明css 全局变量

在声明全局 CSS 变量时 :root 会很有用：

代码语言：javascript复制

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

通过var()函数，使用:root中定义的变量

代码语言：javascript复制


body {
  background-color: var(--main-hotpink);  /* 设置背景颜色 */
}

【更多关于css变量的文章，请看下文】

css自定义属性（css变量）

0 人点赞