CSS选择器的权重与优先规则？
我们做项目的时候，经常遇到样式层叠问题，被其他的样式覆盖，或者写的权重不高没效果，对权重没有具体的分析，做了一个总结。
css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》
如下图，css规则由选择器和声明块组成，写在选择器后面大括号里的就叫声明。
一、样式类型
1、行间
<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>
2、内联
<style type="text/css"> h1{font-size:12px; color:#000;} </style>
3、外部
<link rel="stylesheet" href="css/style.css">
例子汇总html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS选择器的权重与优先规则?</title> <style> .demo{ width:1000px; border:1px solid #eee; margin:0 auto; } a {color:red;} </style> <link rel="stylesheet" rev="stylesheet" href="css/style1.css" type="text/css" /> <link rel="stylesheet" rev="stylesheet" href="css/style2.css" type="text/css" /> </head> <body> <div class="demo"> <a href="#" style="color:yellow;">11111111</a> </div> </body> </html>
style1.css
a {color:blue;}
style2.css
a {color:green;}
不同情况说明：一种四种情况都设置了a的样式，看看优先级情况；
1.当只有2个外联样式时：style2.css > style1.css
显示绿色：
说明样式相同情况下，样式表是从上向下执行的。
2.当有外部和内联情况下
显示绿色：
说明内联和外面，样式相同情况下，样式表是从上向下执行的。
注意：经常有错觉，内联大于外部，那是我们内部经常加到外部下面，覆盖掉了外部的。
3.当有外部，内联，行间时：
显示：黄色
说明：行间权重最高。
二、选择器类型
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type="text"]
6、伪类 ：hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
三、权重计算规则
第一等：代表 内联样式，如: style=””，权值为:1000。
第二等：代表 ID选择器，如：#content，权值为:0100。
第三等：代表 类，伪类和属性选择器，如: .content , :hover , [type="text"] 权值为:0010。
第四等：代表 标签选择器和伪元素选择器，如: p ，::first-line 权值为:0001。
通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
例如：以下规则中选择器的特殊性分别是：
1 style="color: yellow;" /*特殊性：1000*/ 2 #demo a{color: orange;} /*特殊性：100+1=101*/ 3 div#demo a{color: red;} /*特殊性：1+100+1=102*/ 4 .demo a{color: black;} /*特殊性：10+1=11*/ 5 div a{color: green;} /*特殊性：1+1=2*/ 6 .demo input[type="text"]{color: blue;} /*特殊性：10+1+10=21*/ 7 .demo *[type="text"]{color: grey;} /*特殊性：10+0+10=20*/
变态情况：鑫大神的例子256个class类名选择器干掉一个id选择器实例页面
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
四、比较规则
1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。
在权重相同的情况下，后面的样式会覆盖掉前面的样式。
通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
五、实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS选择器的权重与优先规则?</title> <style> a{color: yellow;} /*1*/ div a{color: green;} /*2*/ .demo a{color: black;} /*11*/ .demo a[title]{color: blue;} /*21*/ .demo *[title]{color: grey;} /*20*/ #demo a{color: orange;} /*101*/ div#demo a{color: red;} /*102*/ </style> </head> <body> <a href="">第一条应该是黄色</a> <!--适用第1行规则--> <div><a href="">第二条应该是绿色</a></div> <div class="demo"> <a href="">第三条应该是黑色</a><br/><!--适用第1、2、3行规则，第3行优先级高--> <a href="" title="#">第四条应该是蓝色</a><br/><!--适用第4、5行规则，第4行优先级高--> <p title="#">第五条应该是灰色</p><!--适用第4、5行规则，第5行适用--> </div> <div id="demo"> <a href="">第七条应该是红色</a><!--适用第6、7行规则，第7行优先级高--> </div> </body> </html>
显示：
形象的展示：
