关于CSS权重，一套计算公式来去计算，就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。
遇到样式应用问题，计算一下权重就知道优先级。
具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
注意
1. 权重能叠加但不能进位
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
2. 相同权重，就近原则（CSS的层叠性）
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3{
color:green;
}
#box1 div{
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
文字为yellow， 因为div #box3 的权重为 0001 + 0010 = 0011；#box1 div 的权重为 0010 + 0001 = 0011；相同权重，但后者在下面，比较近，根据层叠性，黄色覆盖了绿色。
3. 继承样式的权重为0。
即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
<style type="text/css">
div p{
color:red;
}
#father{
color:red!important;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
字体是蓝色
</p>
</div>
继承来的!important权重变为0000，被.c2覆盖（.c2权重为0010，并且加上层叠性），所以不起作用。但是#father p就是 0000 + 0001 = 0001