CSS选择器优先级
优先级排序
从高到低：
- !important
- style属性内联样式
- ID选择器（优先级数值+100）
- class类选择器，属性选择器和伪类（优先级数值+10）
- 标签选择器（优先级数值+1）
- 通配选择器，选择符和逻辑组合伪类（优先级数值+0）
优先级计算
除开!important和style属性内联样式，其余选择器样式优先级根据上述规则优先级数值累加计算。
示例：
css
/*优先级为1+0+10=11*/
a:not([rel=nofollow]){
}
/*优先级为1+10+0+10=21*/
body.foo:not([dir]){
}
/*优先级为100+10+1=111*/
#foo .bar p{
}注意
若两个选择器最终优先级计算数值相等，则后渲染的选择器优先级更高（后渲染是相对整个HTML文档的CSS样式渲染顺序来讲的，并非单个CSS文件）
增加优先级
增加选择器优先级的目的是为了调整和覆盖原有样式。
css
/**一般方式：增加嵌套*/
/*但是增加了CSS样式与HTML结构的耦合度*/
.father .foo{}
/*推荐方式：重复选择器自身即可*/
/*避免了与父级或其他样式选择器耦合，增加了可维护性*/
.foo.foo{}优先级越级
示例：
html
<span class="text" id="text">颜色是？</span>css
#text{
color:red
}
/*256个.text组合而成的选择器*/
.text.text.text.text...{
color:blue
}那么文字的颜色是blue还是red呢？
有人认为class选择器优先级数值为10，如果同时256个，那肯定比只有一个id的id选择器（优先级数值为100）优先级高！
实际上，在过去大多浏览器确实是这样的。但是后来除了IE浏览器，其他浏览器都修改了策略——再多数量的低级别选择器优先级也无法超过更高级别的选择器。
所以这里的文字颜色依然是red。