样式优先级

一、样式优先级

优先级怎么计算：

• 样式的优先级是根据权重来计算的
• 权重从左向有依次比较，谁的权重较大，谁的优先级就更高

优先级：

！import > 行内样式 > ID选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器

选择器	权重
行内样式	1，0，0，0
ID选择器	0，1，0，0
类选择器，伪类选择器，属性选择器	0，0，1，0
标签选择器，伪元素选择器	0，0，0，1
其他选择器	0，0，0，0

  
二、选择器权重计算

权重依次相加，最终比较结果

 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*/
0,1,0,1< 0,1,0,2，也就是说从左往右逐个等级比较，前一等级相等才往后比

注：

• 类选择顺序，遵从就近原则
• 在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先
• !important 有最高的优先级