每一条样式规则的选择符，除了决定这条样式规则会作用到哪些元素之外，选择符也是浏览器判断css规则优先级的参考信息。css选择符权重不是简单的内容，但却可以用简单而直观的方法做阐述。
css选择符权重是一个数字游戏，比的就是谁的计算值更大。权重计算值大的样式规则将有更高的优先级。你可以想象为龙珠里的战斗力测量，在这场权重战争（Specificity Wars，这也是早期的一篇阐述css优先级的文章中用到的词）中，战斗力最强的将取得胜利。
战斗力的测量方法是统计选择符中的不同组成元素的个数，并以 (a,b,c,d) 这种形式来判断。其中，abcd分别代表了不同类别的选择符组成元素，且战斗力分别在不同的数量级，a最强，d最弱。从弱到强，这4个字母分别代表的类别是：
元素选择符（Element），伪元素选择符（Pseudo Element） d = 1 – (0,0,0,1)
类选择符 （Class），伪类选择符（Pseudo class），属性选择符（Attribute） c = 1 – (0,0,1,0)
Id选择符 b = 1 – (0,1,0,0)
内联样式（Inline style） a = 1 – (1,0,0,0)
这里的伪元素和伪类做一下补充说明。伪元素选择符，指的是样式作用到的元素不是html结构中的实际元素，即不是真正的dom元素。目前只有:before，:after，:first-line，:first-letter和::selection这5个伪元素选择符。伪类选择符，则是指除前边的这部分选择符之外，在css中加入冒号:的，用于实现动态效果与智能控制的选择符，比如:hover，:nth-of-type(n)。从css3开始，通过区别使用双冒号::来表示伪元素，单冒号:来表示伪类，但为了和以前的浏览器兼容，:after这种诞生于css2的伪类选择符仍然允许使用单冒号的写法。
现在，可以找一些css选择符计算一下了：
看过这些例子后，请理解为，简单的分类计数，正是css中的战斗力测量方法。(a,b,c,d) 这种形式中，abcd分别是不同的数量级，a>b>c>d，和数字的大小比较方法相同，从高位开始，如果高位数字相同，则取低一位数字比较，以此类推。选择符权重计算值最大的样式规则中的属性，覆盖其他的样式规则中的同名属性。
如果你觉得自己计算麻烦，请到Specificity Calculator，这是一个非常棒的计算器。
(a,b,c,d) 中，a代表的内联样式实际是存在于html代码中，只能取值为0或1，所以和其他的较为不同。后边的bcd虽说是不同的数量级，但详细说来有多大差距呢？请看下面这一段Firefox浏览器源代码：
可以看出，class和id对应的十六进制数值之间隔了2位，所以，在Firefox中，要256（162）个class才相当于1个id。在不同浏览器中，这种层级差距，可能有所不同。在写本文的时间点，Opera和Chrome中用256+的class也不能大于id的权重。不过，这些细节信息并不重要，你在实际使用中不可能用到这个数量的选择符。所以，应认为前面所述的权重计算方法是可靠的。
如果权重计算值相同，则进入后一个环节：样式定义顺序。
样式定义顺序
权重计算值相同的样式规则，定义顺序靠后的优先级高。这里的定义顺序，包含了所有的静态样式（不包括由javascript创建<style>或<link>元素引入的样式）定义的可能情况。如直接写在html的<style>标签内的样式规则，通过<link>引入的css文件，以及@import引入的css文件。
请记住，只有权重计算值相同的时候，你才需要考虑样式定义顺序。
!important标识符
!important是可以写在样式规则中的某一属性定义值后的标识符，用于提升某一属性的样式定义的优先级。不同于决定整条样式规则优先级的css选择符权重，!important只影响自己所在位置的单一属性。!important在优先级原则中，可以理解为前文的(a,b,c,d)结构中的，比a更高位的标识：
然后，你完全再按照前文的css选择符权重的比较方法，就可以得出在这种情况下的css优先级了。具体说的话，可以表述如下：
写有!important标识符的样式，其优先级一定大于没有该标识符的样式。
在都写有!important标识符的样式之间，再按照一般的css选择符权重的优先级原则做判断。
css优先级的浏览器兼容性