【CSS】使用active,checked等状态类名控制交互样式

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