以前我一直只知道，css选择器的优先级就是 内嵌样式 > id > class > tag，但是最近在写一个很简单的页面的时候，有人给我提出了这样的问题。深入了解之后我觉得很有必要在这里总结一下。
什么是权重
权重指某一因素或者指标对于某个事物的重要程度，并且强调了因素或指标的相对重要程度
CSS选择器权重
每一个CSS选择器都有一个来表示其重要程度的值，即权重的值，称作“权值”
css通过计算不同种选择器的权重占比，来计算选择器的总权值，最后根据总权值来确定样式规则的优先级次序。
权值的划分
先上一张熟悉的图
大致分为四个等级
第一个等级：内联样式，即写在标签里的style=" "，权值为1,0,0,0
第二个等级：ID选择器，即#ID{ }，权值为0,1,0,0
第三个等级：类选择器|伪类选择器|属性选择器，即.class{}|:hover|[type]，权值为0,0,1,0
第四个等级：标签选择器|伪元素选择器，即img|:after等，权值为0,0,0,1
除此之外的其他选择器，比如通用选择器（），子代选择器（>）等，不在此等级范围之内，所以权值均为0,0,0,0*
权值的计算
权值的计算不是把四个等级的选择器的总权值加起来的，而是
权值 = 第一个等级的选择器 × 第一个等级的选择器个数 ， 第二个等级的选择器 × 第二个等级的选择器个数，第三个等级的选择器 × 第三个等级的选择器个数，第四个等级的选择器 × 第四个等级的选择器个数
权值如何进行比较
当两个权值进行比较时，从高位到低位逐位进行比较，而不是把四个等级的权值加起来进行比较。
比如有AB两个选择器，比较第一个等级时，A选择器的权值比较大，则直接应用A对应的样式，不再进行比较了。
总结一下就是：
- 从高等级开始比较，如果相同等级的权值相同，再继续进行下一个等级的比较。如果不相同，直接应用相同等级权值比较大的选择器对应的样式。
- 如果每个等级的权值均相同，则后定义的规则优先，即覆盖。
- 如果某个样式后面加了 !important，则绝对优先，比内联样式更优先。
几个例子
第一个例子
<html>
<head>
<title>css选择器</title>
<style media="screen">
#father p{
background:red;
}
.son p{
background:blue;
}
</style>
</head>
<body>
<div id="father">
<div class="son">
<p>balabalabalabala</p>
</div>
</div>
</body>
</html>
按照我们之前说的权值的计算和比较方法，第一个选择器（#father p）的权值应该是1,0,0,1，第二个选择器（.son p）的权值是0,1,0,1，按位比较的结果是第一个选择器的权值比较大，所以会优先使用第一种样式，所以结果为
那么当我们修改一下代码：
<html>
<head>
<title>css选择器</title>
<style media="screen">
#father p{
background:red;
}
.son.a.b.c.d.e.f.g.h.i.j.k p{
background:blue;
}
</style>
</head>
<body>
<div id="father">
<div class="son a b c d e f g h i j k">
<p>balabalabalabala</p>
</div>
</div>
</body>
</html>
这时第一个选择器（#father p）的权值为1,0,0,1，第二个选择器（.son.a.b.c.d.e.f.g.h.i.j.k p）的权值为0,12,0,1，这时p的背景颜色应该是什么呢？
还是红色，因为当第一等级比价权值时已经比较出大小了，所以即便第二个选择器的第二等级的权重有12，最后还是会应用第一个样式。
第二个例子
<html>
<head>
<title>css选择器</title>
<style media="screen">
#father p{
background:red;
}
#son p{
background:blue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
<p>balabalabalabala</p>
</div>
</div>
</body>
</html>
结果是
因为第一个和第二个选择器的权值均为1,0,0,1，所以后定义的样式优先被应用
第三个例子
<html>
<head>
<title>css选择器</title>
<style media="screen">
#father p{
background:red !important;
}
#son p{
background:blue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
<p style="background:green">balabalabalabala</p>
</div>
</div>
</body>
</html>
结果还是红色
因为即便p有内联样式控制背景为绿色，但是第一个样式中加了!important，所以有最高优先级。
好啦这篇文章的内容就是这么多，其实继承对于样式的优先级也是有影响的，但是这里提到的只是最基本的选择器权重与样式优先级，关于继承以后会在别的文章中提到。
如果发现有问题欢迎批评指正~
网友评论