CSS 中的 :root 伪类介绍

用户9914333

发布于 2023-02-28 09:25:25

1.5K0

发布于 2023-02-28 09:25:25

文章被收录于专栏：bug收集bug收集

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

网址：www.bugshouji.com

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

1. :root 介绍

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

2. :root的应用场景

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

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

应用2：申明css 全局变量

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

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

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


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

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2023-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度