实际开发中我们会遇到交互页面的状态改变，如果我们给不同的状态创建不同的语义化类名样式，会导致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动画状态。