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控制后代元素