CSS选择器，深入理解CSS选择器权重

前端工程师经常和选择器权重打交道，但是部分人还是一知半解，下面咱们一起学习一下吧。

五大基础选择器

 

• ID选择器：#app{}
• 类选择器：.active{}
• 标签选择器：div{}
• 属性选择器：img[alt]{}
• 通用选择器：*{}

 

应用场景

选择器权重: 这里的“权”，和是数学中加权平均数的“权”一个意思。当同时多个CSS选择器语句的目标是同一个HTML元素时， 选择器权重就派上了用场，而且在开发中经常因为权重问题导致样式失灵

场景一：同权重选择器前后覆盖。

css style:
    p{
        color:red;
    }
    p{
        color:green;
    }
<p>good good study</p>

运行显示字体颜色为绿。

场景二：不同权重选择器按权重值覆盖。

css style:
    .test{
        color:red;
    }
    p{
        color:green;
    }
<p ="test">good good study</p>

运行显示字体颜色为红。

下面我们具体看一下选择器权重规则。

权重规则

选择器权重如下

selector选择器	specificity权重	形式
！important	infinity（无限大）	p { color: red !important; }
行间样式	1，0，0，0	<p style=" color: red; "></p>
ID选择器	0，1，0，0	#header{ css style}
类选择器，属性选择器，伪类选择器	0，0，1，0	.first{ css style}   .first:hover{ css style}
标签选择器，伪元素	0，0，0，1	p{ css style} p::before{css style}
通配符 *	0，0，0，0	*{color: red}

但是在实际场景中第一个是不提倡使用的，而且选择器一般没有这么单一，存在选择器叠加的情况,下面我列举几种常见的情况，

.test p{} => 权重0,0,1,1 

.previous:hover{} => 权重:0,0,2,0

.clear::after{} => 权重:0,0,1,1

#sider .test{} => 权重:0,1,1,0,

注意事项

1，足够多的在 css语句中类名嵌套权重会不会超过ID选择器

.body .first .second .next .....{ css style };
上面的权重会不会超过下面，为什么 ?
#header{ css style };

答案是不能，同种只能叠加九次，也就是最大选择器权重是0，9，9，9,所以样式表无法覆盖行间样式，而且有个小知识就是

这个权重并不是十进制，而是二百五十六进制，划重点要考。

2，从父级样式继承来的样式权重最小，比通配符*都小