class的二般用法
一般来说,class就是给一堆元素添加样式的,但是还有二般的用法,就是用来作为一个开关,来切换他的子孙元素的样式。举个例子:
<ul>
<li><span>1</span>:<span>one</span></li>
<li><span>2</span>:<span>two</span></li>
<li><span>3</span>:<span>three</span></li>
<li><span>4</span>:<span>four</span></li>
</ul>
<button>红色</button>
这里有四个li元素和一个button元素,现在当点击button时,使每一个li元素里面的第二个span元素的字体变成红色。
这时候就可以通过切换父元素的class来改变一群子元素的样式,css:
ul{
list-style-type:none;
}
.red{
}
.red li>span:last-child{
color:red;
}
这里,.red本身没有样式,作用在于当父元素有red class时,子元素的颜色就会发生变化,起到开关的作用。
btn.onclick=function(){
if(document.querySelector("ul").classList.contains('red'))
document.querySelector("ul").classList.remove('red');
else{
document.querySelector("ul").classList.add('red');
}
}
这里看效果:class控制后代元素
class的二般用法的更多相关文章
- sqlalchemy(二)高级用法
sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...
- WIN 下的超动态菜单(二)用法
WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ ...
- Fiddler (二) Script 用法
通过前一篇博客 [Fiddler教程], 我们了解了Fiddler的基本用法, 现在我们来看看Fiddler的高级用法. Fiddler Script. Fiddler中的script 可以 ...
- Android SQLite (二) 基本用法
在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的. 一 ...
- 二. Socket用法
C/S通信架构中,客户端要主动与服务端建立连接,这个链接就是Socket套接字.服务端收到连接请求后,也会开启Socket记录与客户端的链接.C/S两端都要建路Socket才能正常收发数据. 一.构造 ...
- sqlalchemy(二)高级用法 2
转自:https://www.cnblogs.com/coder2012/p/4746941.html 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此 ...
- hibernate学习二 基本用法
一 映射文件User.hbm.xml 定义了持久化类实例是如何存储和加载的,这个文件定义了持久化类和表的映射. 根据映射文件,Hibernate可以生成足够的信息以产生所有的SQL语句,也就是类的实 ...
- RabbitMQ延迟消息:死信队列 | 延迟插件 | 二合一用法+踩坑手记+最佳使用心得
前言 前段时间写过一篇: # RabbitMQ:消息丢失 | 消息重复 | 消息积压的原因+解决方案+网上学不到的使用心得 很多人加了我好友,说很喜欢这篇文章,也问了我一些问题. 因为最近工作比较忙, ...
- 二 @ResponseBody用法
@ResponseBody底层是通过response.getwriter()方法将数据写回前 台 @ResponseBody @RequestMapping (value="/queryLi ...
随机推荐
- 线上Mysql数据库崩溃事故的原因和处理
前文提要 承接前文<一次线上Mysql数据库崩溃事故的记录>,在文章中讲到了一次线上数据库崩溃的事件记录,建议两篇文章结合在一起看,不至于摸不着头脑. 由于时间原因,其中只讲了当时的一些经 ...
- C#配合利用XML文件构建反射表机制
在设计程序时,无论是界面或是后台代码,我们通常都想留给用户一个较为简单的接口.而我在参与封装语音卡开发函数包的时候,发现各种语音卡的底层函数的接口都是各种整形变量标记值,使用起来极为不变.于是就理解了 ...
- Android 异步消息处理机制前篇(一):深入理解ThreadLocal
版权声明:本文出自汪磊的博客,转载请务必注明出处. ThreadLocal简介 ThreadLocal是一个线程内部的数据存储类,通过它可以在指定的线程中存储数据,数据存储以后,只有在指定线程中可以获 ...
- 《java.util.concurrent 包源码阅读》11 线程池系列之ThreadPoolExecutor 第一部分
先来看ThreadPoolExecutor的execute方法,这个方法能体现出一个Task被加入到线程池之后都发生了什么: public void execute(Runnable command) ...
- RFID电动车管理,智慧城市物联网建设的入口
原谷歌CEO施密特说:"我可以非常直接地说,互联网将消失." 互联网在20多年来帮助人们解决了信息共享.交互,几乎在瞬间颠覆了很多传统的商业模式,把卖产品变为卖内容和服务,是个了不 ...
- JavaSE学习入门
Java基础: 1.安装JDK1.7(JDK 包括JRE,Java工具包,Java的类库) 2.编写Hello,world 程序 public class Hello{ public static v ...
- Django的ModelForm组件
创建类 from django.forms import ModelForm from django.forms import widgets as wd from app01 import mode ...
- Spring之bean一基础
在前面得博客依赖注入与控制反转中演示了应用spring实现ioc,在ApplicationContext.xml中有bean的配置,里面只是bean简单的应用.这篇主要是进一步学习使用bean. 一. ...
- 玲珑学院-ACM比赛1014 - Absolute Defeat
1014 - Absolute Defeat Time Limit:2s Memory Limit:64MByte Submissions:257Solved:73 DESCRIPTION Eric ...
- 【OCR技术系列之二】文字定位与切割
要做文字识别,第一步要考虑的就是怎么将每一个字符从图片中切割下来,然后才可以送入我们设计好的模型进行字符识别.现在就以下面这张图片为例,说一说最一般的字符切割的步骤是哪些. 当然,我们实际上要识别的图 ...