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. java-去除html中的标签或者元素属性（正则表达式/jsoup）

    业务场景: 如一篇使用富文本编辑器编辑的新闻稿,需要在列表页面截取前200字作为摘要,此时需要去除html标签,截取真正的文本部分. /** * 删除Html标签 */public static St ...

  2. linux运维基础2

    内容概要 虚拟机关键配置名词解释 远程链接工具 xshell基本使用 linux命令准则 系统运⾏命令 常用快捷方式 文件命令操作 文件编辑命令 内容详情 虚拟机关键配置名词解释 # 虚拟网络编辑器说 ...

  3. django框架2

    内容概要 django小白必会三板斧 静态文件及相关配置 登录功能 静态文件 request对象方法 pycharm链接MySQL django链接MySQL django orm操作 django ...

  4. Training loop Run Builder和namedtuple()函数

    namedtuple()函数见:https://www.runoob.com/note/25726和https://www.cnblogs.com/os-python/p/6809467.html n ...

  5. Linux静默安装Oracle21C

    Linux静默安装Oracle21C 1.修改主机名及配置hosts [root@localhost ~]# hostname # 查看主机名 [root@localhost ~]# hostname ...

  6. ForEach遍历集合、 集合容器

    ForEach遍历集合 foreach循环是一种更加简洁的for循环,也称增强for循环,能用于遍历数组或集合中的元素. 格式: for(容器元素类型 临时变量:容器变量){ 执行语句} 从上面格式可 ...

  7. 在 Pisa-Proxy 中，如何利用 Rust 实现 MySQL 代理

    一.前言 背景 在 Database Mesh 中,Pisanix 是一套以数据库为中心的治理框架,为用户提供了诸多治理能力,例如:数据库流量治理,SQL 防火墙,负载均衡和审计等.在 Pisanix ...

  8. go-zero微服务实战系列（五、缓存代码怎么写）

    缓存是高并发服务的基础,毫不夸张的说没有缓存高并发服务就无从谈起.本项目缓存使用Redis,Redis是目前主流的缓存数据库,支持丰富的数据类型,其中集合类型的底层主要依赖:整数数组.双向链表.哈希表 ...

  9. 【RocketMQ】消息的刷盘机制

    刷盘策略 CommitLog的asyncPutMessage方法中可以看到在写入消息之后,调用了submitFlushRequest方法执行刷盘策略: public class CommitLog { ...

  10. Tapdata x 轻流，为用户打造实时接入轻流的数据高速通道

      在全行业加速布局数字化的当口,如何善用工具,也是为转型升级添薪助力的关键一步.   那么当轻量的异构数据实时同步工具,遇上轻量的数字化管理工具,将会收获什么样的新体验?此番 Tapdata 与轻流 ...