css :root

已于 2022-11-02 23:56:19 修改
阅读量593 收藏 2
点赞数 1
文章标签： css
于 2022-05-16 14:07:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onmans/article/details/124798485
版权
本文介绍了CSS中的`:root`选择器，它如何匹配HTML文档的根元素，以及如何利用`:root`声明和使用全局CSS变量。通过实例展示了如何在样式文件中设置变量，并在其他元素中通过`var()`函数引用它们。
摘要由CSDN通过智能技术生成

1、含义

:root 这个 CSS 为类 匹配文档树的根元素。对于 HTML 来说，:root 表示 <html>元素，除了优先级更高之外，与 html 选择器相同。申明全局css变量时会很有用

2、示例

在css文件里

:root {
    --css-height: 50px
}

使用

div{
    height: calc(100vh - var(--css-height))
}

onmans
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
transform-root-css::hammer_and_wrench:将样式规则返回为函数模板
05-16
转换根css 它是作为实用程序创建的，可在捆绑工具中使用...} ]实例 import transform from "transform-root-css" ;import autoprefixer from "autoprefixer" ;transform ( [ autoprefixer ] ) ( ` :root{ display : fle
CSS3伪类选择器；例如：E:root、E:not等等
03-25
CSS3伪类选择器 E:root 根选择器，它的意思是匹配元素E所在文档的根元素，在HTML文档中，根元素始终是 E:not 否定选择器，它和JQuery中的:not选择器一模一样，可以选择除某个元素以外的元素， E:first-child 第...
CSS样式中的:root伪类
qq_59728477的博客
06-14 3855
CSS 样式中，可以使用 :root 伪类来定义进行全局的变量设置和样式设置
CSS样式表的:root
听海边涛声
05-13 264
CSS样式表的:root
css :root{}
zhuyuyaya的博客
02-25 442
css :root{}
WHAT - CSS :root 变量定义和使用（var）
weixin_58540586的博客
07-22 476
CSS变量可以在CSS文件中定义，并且通常会在:root 选择器中定义，以便在整个应用程序中全局使用。:root {在这个例子中，等变量被定义在:root选择器中，使得它们在整个CSS文件中都可以被引用和使用。等CSS变量通过全局CSS定义和管理，提供了一种灵活和可维护的方式来管理应用程序中的颜色和样式。这些变量可以在CSS文件或CSS-in-JS库中定义，并在整个应用程序中引用和使用。
CSS:root用法
m0_52364694的博客
05-07 5112
var() var函数可以取代任何属性值，用法是先定义变量名并赋值，然后var(变量名)。 例如：color:white background:var(color); :root :root是指文档的根元素，在其中定义的变量可作为全局变量。例如：:root{ –base-vertical-rhythm:1.5rem; –input-error-color:red; } ...
element plus 变量css css :root 用法
m0_50080847的博客
12-01 2733
场景： 用到技术： vue vite element plus 我这里是 修改 element plus css 需要用到 这里先说 root 变量用法及声明。 1.  静态文件 创建一个 public.css 文件 :root { --hoverc: #fe4800; --hoverbgc: #fef8f5; } 2.  App.vue 入口文件引入 public.css &l...
实时动态修改css :root 中的变量实现换肤、主题色的功能
工作的日常记录和平凡的生活分享
04-12 806
到此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色。
css中的 :root
Wancc123的博客
10-09 8114
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称 例如：–background 引用：var(–background)是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
CSS 中的 :root
热门推荐
weixin_51123974的博客
01-04 1万+
CSS 中的 :root
CSS中:root伪类的使用
weixin_41703489的博客
10-02 768
是一个伪类选择器，它选择的是文档树的根元素。在HTML文档中，这个根元素通常是。伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式。变量可以被全局使用，让你的CSS更加模块化和易于维护。
解决CSS浏览器兼容性问题的4种方案
11-21
浏览器兼容性问题一直是前端开发中的一个痛点，尤其是在CSS领域，由于各浏览器厂商对CSS标准的实现存在差异，导致相同的代码在不同浏览器上呈现的效果各异。本文将探讨解决CSS浏览器兼容性问题的四种策略。 首先，...
root-css:此存储库被CSSTHIS取代
05-17
以下示例显示了基于root-css ， rollup和preact的环境。 我可以在看到此示例的代码 在附件的链接中，您可以看到更多配置参数。 /例子 /example ├───components │ └───title │ ├───style.root.css │...
CSS：雪花飘落特效
03-17
:root { --randomXValue: random(0, 100); --randomDurationValue: random(2, 7); } ``` 在这个例子中，我们利用了CSS变量和伪元素的`content`属性，以创建多个雪花。`--snow-density`变量可以用来调整每单位宽度...
前端的学习-CSS（弹性布局-flex）
最新发布
m0_68823256的博客
08-02 1488
CSS的定位-给父元素设置的属性
HTML,CSS,JavaScript实现——井字棋游戏
Rverdoser的博客
08-02 467
这段代码提供了一个3x3的井字棋盘，并使用CSS grid布局来创建这个棋盘。接下来，需要添加JavaScript代码来处理玩家的移动，以及判断输赢。这些逻辑会涉及事件监听、条件判断以及DOM操作。这里只提供实现井字棋游戏的核心HTML和CSS代码。具体的JavaScript逻辑（如处理玩家移动、判断胜负等）需要根据实际情况编写。// 这里添加JavaScript代码来实现游戏逻辑。
web基础之CSS
Yunzhong_jiuxiao的博客
08-02 1066
css属性
css里的:root伪类
06-06
`:root` 是 CSS 中的一个伪类，它表示文档树的根元素，一般指 `<html>` 元素。 使用 `:root` 可以方便地定义全局的 CSS 变量，这些变量可以在整个文档中被使用。例如： ```css :root { --main-color: #333; --...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值