选择器优先级计算

选择器优先级由高到低顺序如下：

• （1）.内联样式。

• （2）.id选择器。

• （3）.类选择器、属性选择器与伪类选择器。

• （4）.*通配符选择器。

• （5）.从父辈元素继承而来的样式。

如果选择器的优先级相同，CSS代码中，靠后的CSS规则优先级高于前面的规则。

---

优先级计算规则：

• （1）.id选择器权重等级：0,1,0,0。

• （2）.类、属性[type=“text”]或伪类选择器权重等级：0,0,1,0。

• （3）.元素和伪元素选择器权重等级：0,0,0,1。

• （4）.*通配符选择器权重等级：0,0,0,0。

• not伪类不参与权重计算.

首先比较最高等级，如果打个平手，那么再比较次一等级，以此类推。 如果选择器等级权重相同，那么后来者居上，也就是后面声明的属性会覆盖前面的。

a{color : yellow; }//元素选择器
div a{color : green; }  //两个元素选择器
.demo a{ color : black; } //类选择器+元素选择器
.demo input[type="text"]{ color : blue;}  //类选择器+属性选择器+元素选择器
.demo *[type="text"]{ color:grey;} //类选择器+通配符选择器+属性选择器
#demo a{ color : orange;} //id选择器+元素选择器
div #demo a{color : red;}// 元素选择器+id选择器+元素选择器