css中的迷惑样式1.:root 伪类2.var() 函数3.calc() 函数的概念和使用

最新推荐文章于 2025-07-14 22:10:44 发布
原创 最新推荐文章于 2025-07-14 22:10:44 发布 · 430 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

大纲


很多朋友对于:root var() calc()很是迷惑,不知道是什么有什么用

:root 伪类

在CSS中，:root 伪类用于选择文档的根元素，通常是元素。通过使用:root，我们可以在整个文档范围内定义全局的CSS变量，这些变量可以在整个样式表中使用。例如，我们可以这样定义全局的颜色变量：

:root {
   
   
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

然后在其他地方使用这些变量：

a {
   
   
  color: var(
最低0.47元/天 解锁文章

200万优质内容无限畅学
CSS变量之var()函数的应用——动态修改样式 & root的使用
seimeii的博客
09-07 1988
CSS变量之var()函数的应用——动态修改样式 & root的使用
【CSS】---- CSS 变量，实现样式和动画函数复用
止于至善
02-20 528
本文介绍 CSS 的自定义属性（变量）来实现样式、动画等 CSS 的复用。都是知道在 CSS 和 JS 复用一个很重要的事情，比如 JS 的函数封装，各个设计模式的使用等等，CSS 中样式的复用，同样重要。MDN 使用 CSS 自定义属性（变量）自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;
css中的 :root
Wancc123的博客
10-09 8514
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称 例如：–background 引用：var(–background)是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
CSS `:root` 伪类深入讲解
最新发布
掘铁
07-14 417
伪类的用法，从基础定义到高级应用，轻松实现高效、可维护的 CSS 样式管理。通过以上内容，您可以全面掌握。
CSS样式表的:root
听海边涛声
05-13 510
CSS样式表的:root
css中:root用法
qq_45973155的博客
08-07 2649
在CSS中，:root是一个伪类选择器，它用来匹配文档的根元素。在HTML文档中，:root实际上总是指向<html>元素。:root的主要用途是定义一个全局的CSS变量（也称为CSS自定义属性），这些变量可以在整个文档的任何地方被引用。使用CSS变量可以让你的样式表更加灵活和易于维护，特别是当你在多个地方需要重复使用同一个值时。通过:root定义的变量，你可以在整个项目中轻松地更新这个值，而不需要去查找和替换所有实例。
css中如何使用var和calc
12-31
### 使用 `var` 和 `calc` 函数实现动态属性值 #### 定义自定义属性 (CSS 变量) 通过使用 CSS 自定义属性（变量），可以在样式表中声明可重用的值。这些变量可以用于任何支持标准 CSS 属性的地方。 ```css :root ...
antd3.x的默认样式@primary-color,如果我用css变量给他赋值，但是默认样式里面有tint这些函数没法解析
02-24
嗯，用户现在遇到了一个问题，就是在Ant Design 3.x中使用CSS变量给@primary-color赋值，但是默认样式中使用了Less的tint函数，导致无法正确解析。这个问题之前我介绍过手动映射CSS变量的方法，但现在用户遇到了函数...
从基础到进阶，掌握 CSS 变量与calc()函数的完整指南
吴师兄大模型的博客
02-08 974
在现代 Web 开发中，CSS 不仅仅是用来修饰网页的工具，它已经成为了前端开发中不可或缺的核心技术之一。随着前端需求的不断增加和变化，传统的 CSS 技术已经逐渐不能满足开发者的需求，因此一些新的、强大的 CSS 特性应运而生，CSS 变量和calc()函数便是其中的重要一环。CSS 变量为我们提供了更高效的样式管理方式，它使得代码更加灵活，减少了重复定义的工作量，尤其在动态主题切换和复杂布局中非常有用。而calc()
使用 :root 设置 CSS 的全局变量
weixin_43714836的博客
04-11 1420
root 伪类选择器，跟别的选择器一样能设置样式，因为其匹配的是文档的根元素，所以其定义的样式同样是全局样式。:root 选择器使用变量，通过 var() 来引用变量，例如：color: var(–color-black-light)。同样，变量能够引用另一个变量，例如：–border-black-light:var(–color-black-light)。:root 选择器定义变量，通过双英文中杆线 – 开头设置，例如： --color-black-light: #666666。
css有了css变量这个神器，我再也不需要less和sass了
纸飞机博客
11-12 5288
用过sass或less的都知道，主要他们可以有嵌套和变量以及函数功能，其实在原生css中，已经开始逐渐支持，诚然目前只有你我熟知，而他人还处在萌芽中，了解css变量，你会发现CSS从此变得异常强大。 变量的声明 声明变量的时候，变量名前面要加两根连词线（–） // 局部声明 body { --foo: #ed145b; --bar: #F7EFD2; } // 全局声明 :root{ --foo: #ed145b; --bar: #F7EFD2; } 例如上面我们申明了2个变量：–.
css中 “var()“ 和 “:root“的作用
dcl199728的博客
03-09 1304
css中 "var()" 和 ":root"
WHAT - CSS :root 变量定义和使用（var）
weixin_58540586的博客
07-22 707
CSS变量可以在CSS文件中定义，并且通常会在:root 选择器中定义，以便在整个应用程序中全局使用。:root {在这个例子中，等变量被定义在:root选择器中，使得它们在整个CSS文件中都可以被引用和使用。等CSS变量通过全局CSS定义和管理，提供了一种灵活和可维护的方式来管理应用程序中的颜色和样式。这些变量可以在CSS文件或CSS-in-JS库中定义，并在整个应用程序中引用和使用。
如何使用 CSS 中的 :root 伪类选择器
rubys007的博客
03-10 3001
了解 CSS 的:root伪类选择器，以及在项目中可能想要如何使用它！CSS 的:root伪类选择器用于选择给定规范的最高级父级。在 HTML 规范中，：root本质上等同于html选择器。在下面的 CSS 片段中，:root和html如果你注意到我说:root本质上等同于html选择器。事实上，：root选择器比html具有更高的优先级。这是因为它实际上被视为伪类选择器（就像或:hover一样）。尽管html选择器出现在后面，:root选择器仍然胜出，这要归功于它更高的优先级！
CSS常用伪类选择器详解
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
CSS :root 声明全局变量,var()函数 (主题切换)
小龚的博客
06-15 4446
在定义主题或编写css公共样式的时候，我们都会声明很多通用的颜色、字号等。我们这里不使用less或sass，而是原生css变量来实现。并且:root 定义的样式可通过js改变从而达到改变主题等效果。 如苹果官网中的一个效果:(滚轮) <style> //变量的声明 :root { --bcolor: black; --percentage: 0%; --fColor:var(--bgcol
CSS中:root伪类的说明和使用
04-14 2003
root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素，所以也可以把:root理解为html根元素选择器，但是比html根元素的优先级高，:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式。CSS :root 选择器 | CSS 参考手册定义全局变量你可以使用:rootcss:root {// 定义CSS变量；// 代码中所有盒模型的边框向内挤压cssbody {:root {html {尽管html选择器出现在后面，:root。
CSS 中的 :root
热门推荐
weixin_51123974的博客
01-04 1万+
CSS 中的 :root
css的:root、var()以及:root、html、* 选择器优先级
qq_39706777的博客
08-31 2667
:root 代表文档的根元素，在:root中声明的属性是全局属性，都可以通过var()引用 var( ) var(属性名) 可以代替元素任何属性中的任何值 :root{ --normal-color: pink; } .bg{ background-color: var(--normal-color); } var( )回退值 没有声明–active-color，则回退到 blue :root{ --normal-color: pink; } .bg{ background
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值