CSS选择器权重计算规则

一、CSS选择器类型包括：

1. ID #id

2. class .class

3. 标签 p

4. 通用 *

5. 属性 [type="text"]

6. 伪类 :link

7. 伪元素 ::after

8. 子选择器 相临选择器

二、权重计算规则

1.第一等，代表内联样式规则 如：style=""，权值为：1000；

2.第二等，代表ID选择器 如：#box，权值为：0100；

3.第三等，代表类，伪类，属性选择器 如：.box，权值为：0010；

4.第四等，代表元素和伪元素选择器 如：div ，权值为：0001；

5.通配符，子元素，相邻元素选择器 如：* ,> ，权值为：0000；

6.继承的样式没有权值。

比较规则：

1.从左往右依次比较，前一等级相等才能往后比。

2.权重相同的情况下，后面的样式会覆盖掉前面的样式。

3.！important的优先级最高。

如下：

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*/