一般来说，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控制后代元素