[程序员入行必备]CSS样式之优先级
专业玩家请移步：http://www.w3.org/TR/CSS2/cascade.html
使用CSS控制页面样式时，经常出现设定的样式被“覆盖”，不能生效的情况。
浏览器是依据怎样的优先次序判断CSS样式的优先级的呢？
总结如下：
样式的来源
样式有多处来源，有网页开发作者设定的、有浏览器默认的、还有网页用户设定的。各种样式声明逐层叠加，或继承、或覆盖、或叠加计算，影响元素的展现效果。
样式的来源依次有：
1、浏览器默认样式；
2、用户样式；
3、作者链接样式；
4、作者页内嵌入样式（这个要尽量少用）；
5、作者行内样式（这个不是好习惯，要戒掉）。
按来源次序，优先级越来越高。
选择器的特殊性
CSS提供各种选择器，可以通过标签、CSS类或ID选定元素。
选定元素的方式不同，优先级也不同。
特殊性按四个维度数计算，设为a、b、c、d，从a到d逐个比较，前面维度的优先级胜出，后面的就不用比了。
四个维度指的是：
a——行内样式；
b——通过id指定；
c——通过类或属性指定；
d——通过标签或伪类指定。
比较方法就是数个数。
举例如下（官方例子）：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
例子中，特殊性自上而下逐次增大。
如果这些选择器都指到同一个元素上，设定的同一个属性，选择特殊性大的样式生效。
如果不幸平局，后声明的生效。
优先原则
优先原则即层叠原则是“层叠样式表”的核心机制，也是CSS名称的由来。
优先原则包括三条：
1、先看特殊性；
2、再看规则来源；
3、直接设定的大于继承来的（特殊性再高，如果只是选择了父元素，或祖先元素，那直接对当前元素的设定生效）。
最后，永远不要用“!important;”。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
