根节点选择器和 html 选择器
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 选择器的更多相关文章
- CSS选择器,CSS3选择器
CSS选择器 ------->CSS选择器优先级 1>通配符选择器(CSS2) 选择所有元素,所有浏览器都支持. *{ margin:0; padding:o; } 2>元素选择器( ...
- CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)
选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- html5--6-11 CSS选择器7--伪类选择器
html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...
- html5--6-10 CSS选择器7--伪类选择器
html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...
- html5--6-9 CSS选择器6--伪类选择器
html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...
- jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
- jQuery选择器与CSS选择器
1. 通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul ...
- jQuery事件篇---过滤选择器 & 表单选择器
内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...
- JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
随机推荐
- AcWing 4378. 选取数对
y总分析:这种题(我也不知道说的是哪种题hh)一般解法为贪心或dp,而本题用的是dp. 其实个人感觉题目不是很严谨,从y总讲解和题解分析得知各个数对区间是不能重叠的,但是题目使用的是≤,感觉数对的区间 ...
- java面试:关于public static void main(String[] args)是什么意思?
它是作为JAVA中的主函数,所有java程序的运行起点就是这个方法,除了args这个名字可以不一样外,其他必须是这样. 主函数的一般写法如下: public static void main(Stri ...
- Servlet的本质
简介:Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. 功能:使 ...
- tf.data(二) —— 并行化 tf.data.Dataset 生成器
在处理大规模数据时,数据无法全部载入内存,我们通常用两个选项 使用tfrecords 使用 tf.data.Dataset.from_generator() tfrecords的并行化使用前文已经有过 ...
- Redis 中的原子操作(3)-使用Redis实现分布式锁
Redis 中的分布式锁如何使用 分布式锁的使用场景 使用 Redis 来实现分布式锁 使用 set key value px milliseconds nx 实现 SETNX+Lua 实现 使用 R ...
- Java 将HTML转为XML
本文介绍如何通过Java后端程序代码来展示如何将html转为XML.此功能通过采用Word API- Free Spire.Doc for Java 提供的Document.saveToFile()方 ...
- react的setState到底是同步还是异步
在介绍这个问题之前,我们先来看一下一个例子: state = {number:1};componentDidMount(){this.setState({number:3})console.log(t ...
- C语言求100以内的和的4种方式
C语言的一个很经典的例子,帮助熟练运行几个循环的写法 * 方法一(do---while语句) #include main () { int i,sum=0; do { sum=sum+i; i++; ...
- PTA(BasicLevel)-1094 谷歌的招聘
一.问题定义 2004 年 7 月,谷歌在硅谷的 101 号公路边竖立了一块巨大的广告牌(如下图)用于招聘.内容超级简单,就是一个以 .com 结尾的网址, 而前面的网址是一个 10 位素数,这个素数 ...
- Tapdata 与阿里云 PolarDB 开源数据库社区联合共建开放数据技术生态
近日,阿里云 PolarDB 开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态.在此之际,一直专注实时数据服务平台的 Tapdata ,也宣布开源其数据源开发框架--PDK(Plu ...