CSS中:root伪类的说明和使用

定义和用法

:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素,所以也可以把:root理解为html根元素选择器,但是比html根元素的优先级高,:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式。CSS :root 选择器 | CSS 参考手册

定义全局变量

你可以使用:root来定义一个全局的字体大小:

css:root {--font-size: 16px; // 定义CSS变量;box-sizing:border-box;// 代码中所有盒模型的边框向内挤压
}

在其他的CSS规则中,你就可以引用这个字体大小变量:

cssbody {font-size: var(--font-size);
}

作为伪类选择器,它比标签选择器具有更高的优先级:

:root {background-color: blue;color: white;
}html {background-color: red;color: white;
}

尽管 html 选择器出现在后面,:root 选择器仍然胜出,这要归功于它更高的优先级!

使用 CSS 自定义属性在全局级别创建变量:

:root {margin: 0;padding: 0;--primary-color: #0000FF;--body-fonts: "Helvetica", "Arial", sans-serif;--line-height: 1.5;
}p {color: var(--primary-color);font-family: var(--body-fonts);line-height: var(--line-height);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/617430.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何正确使用数字化仪前端信号调理?(一)

一、前言 板卡式的数字转换器和类似测量仪器,比如图1所示的德思特TS-M4i系列,都需要为各种各样的特性信号与内部模数转换器(ADC)的固定输入范围做匹配。 图1:德思特TS-M4i系列高速数字化仪,包括2或4通道版…

commit 信息风格迥异、难以阅读,如何规范?

大家好!最近很长时间没有更新了,由于加入新团队新的项目组参与新的工作,导致博客创造搁置了一段时间,今天来记录一下我最近学习到的规范。 怎么写出符合 Angular 规范的 Commit Message 呢? 这是我们团队规定的规范。…

把持中国互联网流量的“四大家族”,各个牛逼plus!

中国互联网80%流量被四大家族把持着,其余要么去这些家族批发流量,要么去抢占剩余20%。 以下是对中国互联网流量四大家族的介绍和代表性的流量入口产品: 百度系: 百度是中国最大的搜索引擎公司,其搜索引擎百度是中国互…

办公小助手来啦! Textin接口,轻松提取文件信息,让你如虎添翼!

😎大家是不是经常为了一堆文件而头疼呢?📚别担心,Textin接口它来了!🎉 一、Textin的神秘面纱 1. Textin是谁? 🔍Textin接口,一款专业的文件信息提取工具,只…

蓝桥杯嵌入式(G431)备赛笔记——DMA+ADC(单通道+多通道)

单通道&#xff1a; 开启循环模式&#xff0c;两个参数设为word u32 adc_tick0; u32 r37_value0; u32 r38_value0; float r37_volt0; float r38_volt0;//DMAADCvoid DMA_ADC() {if(uwTick-adc_tick<100) return;adc_tick uwTick;HAL_ADC_Start_DMA(&hadc2, &r37_v…

C语言——数据在内存中的存储

引言 数据是程序运行的核心。当我们用C语言编写程序时&#xff0c;我们实际上是在操纵内存中的数据。这些数据在内存中是如何储存的&#xff0c;今天我们就来学习这些内容。 基本数据类型 1.整型 int: 基本整型&#xff0c;通常占用4个字节 short: 短整型&#xff0c;通常占用…

dPET论文笔记

PBPK论文笔记 题目&#xff1a;Self-supervised Learning for Physiologically-Based Pharmacokinetic Modeling in Dynamic PET 摘要 动态正电子发射断层扫描成像 &#xff08;dPET&#xff09; 提供示踪剂的时间分辨图像。从 dPET 中提取的时间活动曲线 &#xff08;TAC&a…

tomcat中间件漏洞

目录 什么是Tmocat Tomcat弱口令 Tomcat 文件上传 (CVE-2017-12615) 什么是Tmocat Tomcat是常见的免费的web服务器. Tomcat 这个名字的来历&#xff0c;Tomcat是一种野外的猫科动物&#xff0c;不依赖人类&#xff0c;独立生活。 Tomcat的作者&#xff0c;取这个名字的初衷…

ubuntu 更改 ssh 默认端口 22 以加固安全

出于加固安全考虑&#xff0c;一般公司会禁用 ssh 的 22 端口号&#xff0c;因此我们需要改为其他端口。 1、ssh 命令行登录 进入台式机&#xff0c;修改 /etc/ssh/sshd_config 文件中的 Port 配置行&#xff0c;将 22 改为 8022&#xff0c;保存修改后&#xff0c;重启 ssh 服…

SHAP安装问题

一、安装 pip install shap -i https://pypi.tuna.tsinghua.edu.cn/simple 二、遇到问题 1、提示报错如下&#xff1a; ModuleNotFoundError: No module named numba.core 安装numba&#xff1a; pip install numba -i https://pypi.tuna.tsinghua.edu.cn/simple 提示已经…

STC89C52学习笔记(十二)

STC89C52学习笔记&#xff08;十二&#xff09; 一、AD/DA 1.定义 AD能够将模拟信号转化为数字信号&#xff0c;DA能够将数字信号转化为模拟信号。 2.两种类型的DA转换器 &#xff08;1&#xff09;PWM型DA滤波器 由于PWM是通过脉冲调制的方法来调整的&#xff0c;低通滤…

Python学习从0到1 day25 第二阶段 SQL ② Python操作数据库

少年有梦&#xff0c;不应至于心动&#xff0c;更要付诸行动 —— 24.4.12 pymysql 除了使用图形化工具以外&#xff0c;我们也可以使用编程语言来执行SQL从而操作数据库 在Python中&#xff0c;使用第三方库&#xff1a;pymysql来完成对MySQl数据库的操作 安装 pip install py…