# css 权重规则
第一等：内联样式(style=)权值为1000
第二等：Id选择器(#content) 权值为0100
第三等： 代表类、伪类、属性选择器(.content) 权值 0010
第四等：代表类型选择器、伪元素选择器(div p) 权值0001
第五等：通配符、子选择器、相邻选择器(* >) 权值0000
第六等：继承的样式没有权值
# 选择器类型
ID #id
class .class
标签 p
通用 *
属性 [type="text"]
伪类 :hover
伪元素 ::first-line
子选择器、相邻选择器
类型选择器p div span
# 比较规则
1,0,0,0 > 0,99,99,99.也就是说从左往右逐个等级比较，前一等比相等才往后比。
无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般外部样式引用之后,所以覆盖掉了之前的。
在权重相同的情况下，后面的样式会覆盖前面的样式
通配符、子选择器、相邻选择器等，虽然权值0000，但是也比继承的样式优先
# 实例
<style>
a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/
</style>
<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
<input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
<a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
<a href="">第四条应该是红色</a><!--适用第5、6行规则，第6行优先级高-->
</div>