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. 从数字化概念到落地，都说是一道坎，JNPF能为企业带来什么呢？​

    数字经济席卷全球推动产业转型是必然趋势,人类社会正在数字化大潮中发生深刻变革,数字化越来越成为推动经济社会发展的核心驱动力.企业正处于数字经济大潮的风口浪尖,故企业经验决策者应深刻认识数字化转型对于企 ...

  2. CentOS6.5修改镜像源问题

    千呼万唤使出来阿,随着centos版本不断地更新好多镜像源已经被放弃了治疗,尤其是低版本的centos,下面以CentOS6.5为例进行刨析吧! 上干货: 配置文件 vi /etc/yum.repos ...

  3. 阶段性总结 GDOI 2022 PJ

    阶段性总结 GDOI 2022 PJ 比赛经过 Day ? ~ Day -1 半停课集训,补了很多东西,但是之前漏得太多了,结果是还有很多题没改 打了若干场 AtCoder ,承认自己思维的不足,训练 ...

  4. 阻碍NB-IoT技术在智能水表发展的4个原因分析

    与以往的机械水表不同,根据设备所搭载的模块,智能水表分为IC卡智能表.光电直读智能表以及无线远传智能表.随着物联网技术和工业的发展,无线远程传输智能水表开始被水务公司广泛使用. 以往的机械水表.指针式 ...

  5. 【clickhouse专栏】对标mongodb存储类JSON数据文档统计分析

    一.文档存储的需求 很多的开发者都使用过mongodb,在mongodb中数据记录是以文档的形式存在的(类似于一种多级嵌套SQL的形式).比如下面的JSON数据结构:dev_ip表示某一台服务器的ip ...

  6. ExtJS 布局-Card 布局（Card layout）

    更新记录: 2022年6月1日 开始. 2022年6月6日 发布. 1.说明 卡片布局类似牌堆,每次只有一个子组件可见,子组件几乎填满了整个容器.卡片布局常用于向导(Wizard)和选项卡(Tabs) ...

  7. ExtJS直接加载HTML页面

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

  8. 关于webstorm更换主题

    现在我们前端使用编辑器,只要用习惯就好,不过这里推荐使用webstorm,因为被称为,'js神器'的称号,不是白说的.接下来我们来看下怎么引入主题. 下面有一个网站,这个网站的名字叫 http://w ...

  9. 写个js获取2019博客之星投票活动的名次与投票数

    获取投票数 // app.jsvar request = require('request');var cheerio = require('cheerio');request('http://m23 ...

  10. python各种BUG报错解决

    报错1 python学习交流群:660193417### Could not build atari-py: Command '['cmake', '..']' returned non-zero e ...