CSS 中除了用标签选择器选中<html>标签以外还有一个等价的是:root选择器。CSS 变量是有作用域的，全局变量都可以声明在<html>里。

<div class="theme">Theme Color.</div>

<button onclick="change()">切换</button>

HTML 允许自定义属性，:root[type='a']：选中<html>标签，其属性type=a。

:root[type='a'] {

	--theme-color: rgb(44, 127, 204);

}

:root[type='b'] {

	--theme-color: rgb(163, 39, 39);

}

.theme {

	color: var(--theme-color);

}

当点击按钮之后，给<html>添加属性 type；div.theme使用 CSS 变量--theme-color：

let light = false;

function change() {

	if (light) {

		light = false;

		$('html').attr('type', 'a');

	} else {

		$('html').attr('type', 'b');

		light = true;

	}

}

根节点选择器和 html 选择器的更多相关文章

  1. CSS选择器，CSS3选择器

    CSS选择器 ------->CSS选择器优先级 1>通配符选择器(CSS2) 选择所有元素,所有浏览器都支持. *{ margin:0; padding:o; } 2>元素选择器( ...

  2. CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)

    选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...

  3. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  4. html5--6-11 CSS选择器7--伪类选择器

    html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...

  5. html5--6-10 CSS选择器7--伪类选择器

    html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...

  6. html5--6-9 CSS选择器6--伪类选择器

    html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...

  7. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  8. jQuery选择器与CSS选择器

    1. 通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul ...

  9. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  10. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

随机推荐

  1. SPFA 最短路算法

    SPFA算法 1.什么是spfa算法? SPFA 算法是 Bellman-Ford算法 的队列优化算法的别称,通常用于求含负权边的单源最短路径,以及判负权环.SPFA一般情况复杂度是O(m)O(m) ...

  2. 类型转换——JavaSE基础

    类型转换 类型判断 可以通过Instanceof关键字判断左操作数是否是右操作数的父类或本身 强制类型转换 不能对布尔值进行转换 不能将对象类型转换为不相关的类型 把高容量转向低容量时,需要进行强制类 ...

  3. SpringBoot之:SpringBoot的HATEOAS基础

    目录 简介 链接Links URI templates Link relations Representation models 总结 简介 SpringBoot提供了HATEOAS的便捷使用方式,前 ...

  4. 【Java面试】为什么引入偏向锁、轻量级锁，介绍下升级流程

    Hi,我是Mic 一个工作了7年的粉丝来找我,他说最近被各种锁搞晕了. 比如,共享锁.排它锁.偏向锁.轻量级锁.自旋锁.重量级锁. 间隙锁.临键锁.意向锁.读写锁.乐观锁.悲观锁.表锁.行锁. 然后前 ...

  5. Flex & Bison 开始

    Flex 与 Bison 是为编译器和解释器的编程人员特别设计的工具: Flex 用于词法分析(lexical analysis,或称 scanning),把输入分割成一个个有意义的词块,称为记号(t ...

  6. Python在函数中使用列表作为默认参数

    在学习中遇到的Python的一个坑,那就是使用列表作为默认参数. 我们知道,在Python中,列表(list)是可变对象,所以列表的内容可能会在函数内改变.另一个需要注意的是,使用列表作为函数的默认参 ...

  7. jenkins页面一直在Please wait while Jenkins is getting ready to work ...

    原因:因为访问官网太慢.我们只需要换一个源,不使用官网的源即可. 1.找到jenkins工作目录 find / -name *.UpdateCenter.xml 2.修改文件中的url,随后重启就行了 ...

  8. docker安装Sentinel

    1.拉取镜像 docker pull bladex/sentinel-dashboard:latest 2.运行 docker run --name sentinel --restart=always ...

  9. JDBCToolsV3 ：DAO

    编写文件和步骤 ①,bean模块:数据类Course,包含数据的class,封装数据类型; ②,DAO:1)定义对数据的操作接口,及规定标准(包含怎样的操作).例如:CourseDAO数据库操作的接口 ...

  10. 『现学现忘』Git后悔药 — 31、reset版本回退命令总结

    目录 1.--soft回退说明 2.--mixed回退说明 3.--hard回退说明 4.总结 在Git中进行版本回退需要使用git reset命令. 以前面文章中的示例为例,当我准备在V4版本,回退 ...