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. python实现一个加密的文字处理器

    这是一个类似于记事本的文字处理器.与正常的记事本不同的是,它会将文本文档进行加密,确保无法被常规的程序打开. 由于本人是一位业余编程爱好者,对于"python之禅"之类的规则比较不 ...

  2. 抽象类与接口——JavaSE基础

    抽象类与接口 抽象类 抽象类既包含规范又包含具体实现 抽象类可以包含实现的方法 和 未实现的用abstract修饰的抽象方法 抽象类不可以有实例化(不能使用new实例化),只能通过子类继承,然后对子类 ...

  3. 2021.06.12【NOIP提高B组】模拟 总结

    T1 题目大意:有 \(n\) 个点,到点 \(i\) 可以获得 \(A_i\) ,同时消耗 \(B_i\) 若当前价值小于 \(B_i\) 则不能到,问从 \(P\) 开始,任一点结束后的最大值. ...

  4. XDEBUG 选项

    到官网 http://www.xdebug.com/download.php 下载 找到对应PHP版本的 Xdebug ,后面带 TS 的为线程安全,本机环境为 win7 64 + php-5.5.1 ...

  5. R语言读取matlab中数据

    1. 在matlab中将数据保存到*.mat 文件夹 save("data.mat","data","label")#将data和label ...

  6. 【Nginx】Windows平台下配置Nginx服务实现负载均衡

    前言:废话不多说了,直接上步骤. 系统环境:win10 测试用的开发环境和服务类型:VS2022 + DotNet 6 + WebApi 1.本地先创建一个webapi项目,用于测试使用. 2.新建一 ...

  7. centos 7搭建svn+apache及权限控制

    SVN服务器运行模式: 模式1:svn服务器单独运行 监听: 3690端口 访问: svn://IP 模式2: svn 服务器+ apache : 80 端口 访问: http://IP 1. #安装 ...

  8. InheritableThreadLocal 在线程池中进行父子线程间消息传递出现消息丢失的解析

    在日常研发过程中,我们经常面临着需要在线程内,线程间进行消息传递,比如在修改一些开源组件源码的过程中,需要将外部参数透传到内部,如果进行方法参数重载,则涉及到的改动量过大,这样,我们可以依赖Threa ...

  9. MySql中数据表增加字段很慢怎么办

    正确的做法是这样,对于数据量很大的表,需要添加所有或者修改字段的做法是如下: 1.先创建一张一样的表 create table new_tb like tb_old; 2.修改创建表的字段 alter ...

  10. CANN算子：利用迭代器高效实现Tensor数据切割分块处理

    摘要:本文以Diagonal算子为例,介绍并详细讲解如何利用迭代器对n维Tensor进行基于位置坐标的大批量数据读取工作. 本文分享自华为云社区<CANN算子:利用迭代器高效实现Tensor数据 ...