前端开发之-------------合理利用CSS的权重----------------

　　什么是CSS的权重？对于前端工程师来说，这是一个很基础的问题，如果前端工程师没有深刻理解这个概念，则很难写出高质量的CSS代码。

　　那么到底什么是CSS的权重呢？我们又怎么来进行判定CSS的权重呢？

　　讨论CSS的权重，则必须想了解而且是深刻的了解CSS样式的6种基础选择器：ID选择器、类选择器、属性选择器、伪类和为对象选择器、标签选择器以及统配选择器。所有在CSS样式中定义的选择符都是由这6种基础选择符组合而成的，组合的方式也分为三种：后代选择符、子选择符、相邻选择符。（如果希望更详细的认识选择器的话点击（CSS选择器）；

　　CSS的权重指的是这些选择符的优先级，优先级高的CSS样式会覆盖优先级低的样式，优先级越高说明权重越高，反之亦然。

　　计算CSS的权重是有一定的规则的。根据W3C指定的CSS规范，CSS权重是通过如下规则计算的：

　　　　1）计算选择符中的ID选择器的数量（=a）。

　　　　2）计算选择符中的类选择器、属性选择器以及伪类选择器的数量（=b）。

　　　　3）计算标签类型选择器和伪对象选择器的数量（=c）。

　　　　4）忽略全局选择器。

　　　　按照规则，基础选择器具有这样的优先级：

　　　　　　ID > 类 | 伪类 | 属性选择 > 标签类型 | 伪对象 > 通配符

*			/* a=0 b=0 c=0 -> 权重 =   0  */

li			/* a=0 b=0 c=0 -> 权重 =   0  */

ul li			/* a=0 b=0 c=0 -> 权重 =   0  */

ul ol+li		/* a=0 b=0 c=0 -> 权重 =   0  */

h1 + #[rel=up]		/* a=0 b=0 c=0 -> 权重 =   0  */

ul ol li.red		/* a=0 b=0 c=0 -> 权重 =   0  */

li.red.level		/* a=0 b=0 c=0 -> 权重 =   0  */

#x34y			/* a=0 b=0 c=0 -> 权重 =   0  */

#s12:not[foo]		/* a=0 b=0 c=0 -> 权重 =   0  */

　　注意：如果两个选择符的权重相同，则可依照“就近原则”来判断。

　　明白了CSS选择符的权重后，我们如何依照选择符的权重定义合适的选择符？

　　定义选择符的原则是：尽量使选择付的权重低，目的是保证样式在应用于多个元素时容易被覆盖，这可提高样式代码的重用性和可维护性。

具体的原则如下：

　　（1）CSS样式中尽量不要使用ID选择器

　　　　ID选择器ijuyou很高的权重，如果要覆盖使用了ID选择器的样式，就必须在原先使用ID选择器的基础上添加新的选择符（类选择器或者标签类型选择器或者额使用个!important,但这样做的结果是无法重用的样式代码会越来越多。

　　（2）减少子选择器的层级

　　　　减少选择器的层级的过程也是降低选择符整体权重的过程。

　　（3）使用组合的CSS类选择器

　　　　　使用CSS选择器组合的方式，开发者可以不用考虑CSS样式覆盖的问题，避开了计算选择符权重的过程，同时也提高了代码的重用性。