深入CSS优先级

<p class="myClass" id="myDiv">   

div#myDiv { color: purple; }    1-0-0  
p.myClass { color: red;}			0-1-1  
p[id^='my'] {color: blue;}			0-1-1  
p:nth-of-type(1n) {color: yellow;}	0-1-1

div#test span { color: green }  
span { color: red }  
div span { color: blue }   

<div id="test">   
  <span>Text</span>  
</div>

div#test span { color: green }  
span { color: red !important; /*注意这里*/ }  
div span { color: blue }   

<div id="test">   
  <span>Text</span>  
</div>

.class3 {color: blue}   
.class1 {color: green;}     
.class2 {color: red;}   

<span class="class1 class2 class3"> 我是红色，class2生效</span>

在线实例

从上面的例子中可以看到，三个class类型，最后生效的是样式表中定义最后的，而不是class中定义最后的。

3.4 无视DOM树中的距离

body h1 {   
  color: green;  
}  
div h1 {   
  color: red;  
}  
html h1 {   
  color: purple;  
}   

<div>   
  <h1>Here is a title!</h1>  
</div>

在上面的样式中，都是以标签选择器 标签选择器这种后代选择器的形式来定义样式，可以看到最终显示的样式中定义最后的。

3.5 :not()

div.outer p {   
  color:orange;  
}  
div:not(.outer) p {   
  color: lime;  
}   

<div class="outer">   
  <p>This is in the outer div.</p>   
  <div class="inner">   
    <p>This text is in the inner div.</p>   
  </div>  
</div>

:not 否定伪类在优先级计算中不会被看作是伪类，而是当作普通选择器来处理。

总结

• 样式表的元素选择器选择越精确，则其中的样式优先级越高
• 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
• 特殊的!important会覆盖前面所有的声明

参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

http://www.standardista.com/css3/css-specificity/