实际开发中我们会遇到交互页面的状态改变，如果我们给不同的状态创建不同的语义化类名样式，会导致js中有很多样式控制的类名，不利于维护。 —————————————————————————————————————— 对此我们可以使用最简单的办法，对所有控制交互的样式使用 .active .checked状态类名！ 同时我们要遵守最重要的一条准则！ 即： .active .checked状态类名自身【绝对不能有CSS样式】！ 这些状态类名只是为了和其他类名产生关系，然后再根据关系产生对应的样式变化。这种关系可以是父子，兄弟或者自身。 例如： 
.page.active { max-height: 250px; } 
.active > .open{ display: none; }
.page.active组合类名触发的，.box元素同时有.active状态的时候，变化 同样，.active > .open表示，当父元素状态为.active的时候，隐藏。   相邻父子关系.active > .xxxIE7浏览器才开始支持，由于如果几乎所有普通交互都使用这同一个.active类名， 因此，不能简单使用父子选择器.active .xxx有一定概率会发生冲突，使用相邻父子关系.active > .xxx约束则无此问题； 相邻兄弟选择器.active + .xxx以及普通兄弟选择器.active ~ .xxx全部都是IE7浏览器才开始支持。   常用的一些状态类名 最常用： .active以及.disabled，在单复选框使用checked，自定义下拉使用selected等。 另外，还有其他一些状态类名，有.on，以及.in和.out。 .on的状态含义宽泛，很多情况都可以使用.on，而 .in 和 .out 可用来标示CSS3 animation动画状态。
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄