：root选择器的妙用【2021.11.14】

：root选择器能做什么，它能匹配元素所在文档的根元素，而在HTML文档中，根元素始终是<html>.，但是：root的优先级高于在css中直接对html操作。

也就是说对：对：rot操作就相当于对根元素<html>操作，比如改背景色：

        html {background-color: rgb(212, 209, 9);}:root {--primary-color: #ff434f;--secondary-color: #e3e3e3;--text-color-darker: #2e2e2e;background-color: rgb(190, 26, 26);}

那有同学要问了，就这么点用处，能叫妙用吗？细心的同学已经看到，：root里面的自定义变量了。

没错，我们可以在：root里面声明css全局变量，变量的声明对大小写敏感，且需要在被声明的变量前加上"--",且变量只能作为属性值，不能作为属性名！

既然声明了css全局变量，我们就得调用它，通过var（）函数调用:

html {background-color: rgb(212, 209, 9);}:root {--primary-color: #ff434f;--secondary-color: #e3e3e3;--text-color-darker: #2e2e2e;background-color: rgb(190, 26, 26);}div {width: 500px;height: 500px;background-color: var(--secondary-color);}body {background-color: var(--text-color-darker);}

background-color: var(--secondary-color,#ff434f);var（）也可以有第二个参数，表示默认值，如果调用的变量不存在则使用默认值。

别以为var（）的妙用就只有定义颜色，它还能定义字符串和数值：

            --hello:'hello';--max:1920px;--marigin:30px 20px 40px;

：root选择器的妙用【2021.11.14】相关推荐

2021.11.14
7-34 统计素数并求和 (20 分) 本题要求统计给定整数M和N区间内素数的个数并对它们求和. 输入格式: 输入在一行中给出两个正整数M和N(1≤M≤N≤500). 输出格式: 在一行中顺序输出M和 ...
[2021.11.14]UPC-计算机2021随堂测验第四场-21234 Problem G 买房子
马克思姆想要在一座大房子里面买一套公寓套房,已知有n个套房排成一排,其中有k套房已经被人住了.马克思姆喜欢串门,所以他想要住旁边有人住的房子.我们规定一套房子如果是好房子,那么相邻的房子中至少有一个房 ...
2021.11.14 D20—自学vue，select下添加checkbox
开发过程中总会遇到一些奇奇怪怪的设计,比如以下这个. 说明:使用element-ui框架, 它有以下组件:el-checkbox与el-select 目标:在el-select的option前面添加c ...
2021.11.8-11.14 AI行业周刊（第71期）：AI行业经验
篇章一:行业经验不同的AI公司,对于AI产品的场景定位不同. 有的公司是面向C端产品.有的公司专门做B端用户. 当然大白所在的公司,也有具体的定位,主要面向智慧金融.智慧机场.智慧城市. 之前,一直 ...
首页推荐流支持快捷修改兴趣标签，问答支持展示gif【2021.11.8】
hello,大家好,这里是「CSDN产品周报」第17期.本次更新主要涉及首页和问答两个产品模块,具体细节请往下看. 一.首页优化 1.「推荐」信息流新增「修改兴趣标签」按钮从用户需求的角度考虑,对内 ...
第13期微生物组-宏基因组分析(线上/线下同时开课，2021.11)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.Python课程和转录组的线上直播课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 ...
微生物组-宏基因组分析(线上/线下同时开课，2021.11)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.Python课程和转录组的线上直播课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 ...
【橙果工作室】【网站组】2021.11.11内容
HTML/CSS 2021.11.11 表格 <table border="1"><tr><th>header</th><th ...
实战：怎样把间隔的几个commit整理成1个？-2021.11.18
实战:怎样把间隔的几个commit整理成1个?-2021.11.18 目录文章目录实战:怎样把间隔的几个commit整理成1个?-2021.11.18 目录文档来源实验环境实验软件(无) 1 ...
博客新功能上线，可导出PDF……【2021.12.14】
hello,大家好,这里是「CSDN产品周报」第21期.本次更新主要涉及首页榜单.博客.问答,具体细节请往下看. 一.CSDN榜单优化 1.排行榜导航栏从右侧移动到左侧 2.新增「原力月榜」,选取全站 ...

：root选择器的妙用【2021.11.14】

：root选择器的妙用【2021.11.14】相关推荐

最新文章

热门文章