一般来说,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的二般用法的更多相关文章

  1. sqlalchemy(二)高级用法

    sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...

  2. WIN 下的超动态菜单(二)用法

    WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/     ...

  3. Fiddler (二) Script 用法

      通过前一篇博客 [Fiddler教程], 我们了解了Fiddler的基本用法,  现在我们来看看Fiddler的高级用法. Fiddler Script.   Fiddler中的script 可以 ...

  4. Android SQLite (二) 基本用法

    在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的. 一 ...

  5. 二. Socket用法

    C/S通信架构中,客户端要主动与服务端建立连接,这个链接就是Socket套接字.服务端收到连接请求后,也会开启Socket记录与客户端的链接.C/S两端都要建路Socket才能正常收发数据. 一.构造 ...

  6. sqlalchemy(二)高级用法 2

    转自:https://www.cnblogs.com/coder2012/p/4746941.html 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此 ...

  7. hibernate学习二 基本用法

    一  映射文件User.hbm.xml 定义了持久化类实例是如何存储和加载的,这个文件定义了持久化类和表的映射. 根据映射文件,Hibernate可以生成足够的信息以产生所有的SQL语句,也就是类的实 ...

  8. RabbitMQ延迟消息:死信队列 | 延迟插件 | 二合一用法+踩坑手记+最佳使用心得

    前言 前段时间写过一篇: # RabbitMQ:消息丢失 | 消息重复 | 消息积压的原因+解决方案+网上学不到的使用心得 很多人加了我好友,说很喜欢这篇文章,也问了我一些问题. 因为最近工作比较忙, ...

  9. 二 @ResponseBody用法

    @ResponseBody底层是通过response.getwriter()方法将数据写回前 台 @ResponseBody @RequestMapping (value="/queryLi ...

随机推荐

  1. 线上Mysql数据库崩溃事故的原因和处理

    前文提要 承接前文<一次线上Mysql数据库崩溃事故的记录>,在文章中讲到了一次线上数据库崩溃的事件记录,建议两篇文章结合在一起看,不至于摸不着头脑. 由于时间原因,其中只讲了当时的一些经 ...

  2. C#配合利用XML文件构建反射表机制

    在设计程序时,无论是界面或是后台代码,我们通常都想留给用户一个较为简单的接口.而我在参与封装语音卡开发函数包的时候,发现各种语音卡的底层函数的接口都是各种整形变量标记值,使用起来极为不变.于是就理解了 ...

  3. Android 异步消息处理机制前篇(一):深入理解ThreadLocal

    版权声明:本文出自汪磊的博客,转载请务必注明出处. ThreadLocal简介 ThreadLocal是一个线程内部的数据存储类,通过它可以在指定的线程中存储数据,数据存储以后,只有在指定线程中可以获 ...

  4. 《java.util.concurrent 包源码阅读》11 线程池系列之ThreadPoolExecutor 第一部分

    先来看ThreadPoolExecutor的execute方法,这个方法能体现出一个Task被加入到线程池之后都发生了什么: public void execute(Runnable command) ...

  5. RFID电动车管理,智慧城市物联网建设的入口

    原谷歌CEO施密特说:"我可以非常直接地说,互联网将消失." 互联网在20多年来帮助人们解决了信息共享.交互,几乎在瞬间颠覆了很多传统的商业模式,把卖产品变为卖内容和服务,是个了不 ...

  6. JavaSE学习入门

    Java基础: 1.安装JDK1.7(JDK 包括JRE,Java工具包,Java的类库) 2.编写Hello,world 程序 public class Hello{ public static v ...

  7. Django的ModelForm组件

    创建类 from django.forms import ModelForm from django.forms import widgets as wd from app01 import mode ...

  8. Spring之bean一基础

    在前面得博客依赖注入与控制反转中演示了应用spring实现ioc,在ApplicationContext.xml中有bean的配置,里面只是bean简单的应用.这篇主要是进一步学习使用bean. 一. ...

  9. 玲珑学院-ACM比赛1014 - Absolute Defeat

    1014 - Absolute Defeat Time Limit:2s Memory Limit:64MByte Submissions:257Solved:73 DESCRIPTION Eric ...

  10. 【OCR技术系列之二】文字定位与切割

    要做文字识别,第一步要考虑的就是怎么将每一个字符从图片中切割下来,然后才可以送入我们设计好的模型进行字符识别.现在就以下面这张图片为例,说一说最一般的字符切割的步骤是哪些. 当然,我们实际上要识别的图 ...