什么是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样式覆盖的问题，避开了计算选择符权重的过程，同时也提高了代码的重用性。