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. QC快速充电

    QC快充 一.高通QC快充的介绍 二.识别充电类型的芯片介绍 三.QC充电曲线 四.如何在log中看QC充电类型 五.QC3识别错误 六.波形图 一.高通QC快充的介绍 高通QC快充技术,又称Quic ...

  2. 如何把你的 Android 使用得像 Linux

    前言 最近在学校里上课,老师讲的东西又听不进去,手里只有一个手机和一个平板,之前还可以用 ssh 连接云服务器玩点东西,但是我是用的软件 Juice ssh 并不是很友好,退出到后台一段时间后竟然会自 ...

  3. Eclipse For Java开发环境部署

    Eclipse For Java开发环境部署 1.准备工作 jdk安装包 jdk官网下载 Eclipse安装包 Eclipse官网下载 Eclipse下载时选择图中所示的国内镜像地址下载 下载后的文件 ...

  4. 开发工具-在线生成GUID

    更新记录 2022年6月11日 记录开始. https://www.toolbaba.cn/d/dev_guid http://tool.pfan.cn/guidgen https://www.iam ...

  5. ExtJS直接加载HTML页面

    ExtJS直接加载HTML页面 说明 ExtJS组件很不错,但再完美也有需要其他组件的时候,比如有时候就需要引入已经写好的HTML页面.主要的方法如下. 测试环境:ExtJS 7.4 使用html配置 ...

  6. Windows系统重置用户登录密码

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年8月23日. 方法一.使用带有密码恢复功能的PE盘 买一张 PE光盘 或 自制PE启动盘,这里推荐微PE. 准备 ...

  7. RPA应用场景-财务报表统计整合

    场景概述 财务报表统计整合 所涉系统名称 邮储银行系统 人工操作(时间/次) 3小时 所涉人工数量 1 操作频率 每月 场景流程 1.登录各个区支行系统 2.机器人按照要求,自动复选多项业务参数,导出 ...

  8. linux查询文件或者文件夹

    查找目录:find /(查找范围) -name '查找关键字' -type d // 查找fastdfs_storage_data文件夹 find / -name fastdfs_storage_da ...

  9. 华为HMS Core携手超图为三维GIS注入新动能

    6月30日,在2022(第五届)GIS软件技术大会GIS基础软件新技术板块论坛上,华为联合超图推出了基于HMS Core 3D Engine开发的高保真三维GIS插件,通过3D渲染技术助力三维GIS实 ...

  10. vue在Docker上运行

    Dockerfile # 设置基础镜像 FROM nginx:latest # 定义作者 MAINTAINER test # 将dist文件中的内容复制到 /etc/nginx/html/ 这个目录下 ...