CSS 选择器权重计算与优先级
作者:
WangMin
格言:努力做好自己喜欢的每一件事
在讲CSS 选择器权重计算与优先级之前，我们先来了解一下CSS是用来干什么的？CSS是用来通过添加样式使网页更加美观，也就是说CSS是利用选择器来美化网页的，使用户可以在网页上更清晰地找到自己需要的东西。
CSS添加样式的方式：
- 有内部样式（内部样式就是在html文件中通过标签来添加样式）
- 外联样式（通过标签将外部的样式css文件引入到html文件中）
- 还有行间样式，即在元素标签中通过style=" "添加样式；
而添加样式是通过CSS选择器选择指定的标签进行添加的，那么什么是CSS选择器呢？它是怎么起作用的呢？它们之间的优先级是怎样来区别的呢？
样式类型
1、行间样式
就是在一个标签内，直接添加一个 style=‘ ’ ，然后在这里面添加你说需要对标签描述的属性及属性值。格式如下:
<h1 style="font-size:12px;color:#000;">我是行间CSS样式。</h1>
2、内联样式
在<head>头部标签中添加 <style type="text/css"> 标签，然后在里面添加对应选择器及其对选择器描述的属性及属性值。格式如下：
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
3、外部样式
单独将对选择器及其对选择器描述的属性及属性值写入到一个css文件中，然后将这个文件以以下方式引入到HTML文件的<head>头部标签中。
<link rel="stylesheet" href="css/style.css">
选择器的种类
| 选择器 | 表现形式 |
|---|---|
| ID | #id，例如：id="name"，id="name_txt" |
| class | .class，例如：class="name"，class="name_txt" |
| 标签 | p，例如：body,div,p,ul,l |
| 属性 | [type='text'] |
| 伪类 | :hover，例如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。 |
| 相邻选择器、子代选择器 | > +，例如：div>p,带大于号> |
css的权重
每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”。css通过css选择器的权重占比，来计算css选择规则的总权值，从而确定 定义样式规则的 优先级次序；也就是说css选择规则的优先级 是按照 css选择器的权值的比较 来确定的，选择器的权值越大就优先级就高，优先级越高就决定了该元素在页面中的最终呈现的效果。
css权重的计算规则
权值等级划分， 一般来说是划分4个等级：
| 类型 | 权重 |
|---|---|
| 内联样式 | 如: style=" "，权值为1000。 |
| ID选择器 | 如：#name，权值为0100。 |
| class类选择器，伪类和属性选择器 | 如.name，权值为0010。 |
| 标签选择器和伪元素选择器 | 如div p，权值为0001。 |
通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
!important
!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
css优先级规则
- css选择规则的权值不同时，权值高的选择器优先；
- css选择规则的权值相同时，后定义的选择器规则优先；
- css属性后面加 !important 时，无条件绝对优先；
总体来说： !important>行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器，注意: !important规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他对该元素的声明，无论它处在声明列表中的哪个位置。但注意使用!important样式很难调试，因为它改变了你样式本来的权值规则。
权值如何进行比较
当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1000,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。
当两个权值进行比较时，从高位到低位逐位进行比较，从高等级开始比较，如果相同等级的权值相同，再继续进行下一个等级的比较。如果不相同，直接应用相同等级权值比较大的选择器对应的样式。而不是把四个等级的权值加起来进行比较。如果某个样式后面加了 !important，则绝对优先，比内联样式更优先。下面就来举例说明一下吧！
案例1：
<div id="box">
<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box p{
width:300px;
line-height: 30px;
color:#333;
background:#ccc;
}
div p{
width:300px;
line-height: 40px;
color:#fff;
background:#f00;
}
执行效果如下：
我这里给div中的p进行了两种方式的添加样式（ID选择器+标签选择器、标签选择器+标签选择器），这里根据以上权重值的比较，将第一种方式第一级ID选择器（#box）与第二种方式的第一级标签选择器进行权重比较，因为ID选择器（#box）的权重值为0100，而标签选择器（div）的权重值为0001，所以这里的#box 比 div 优先级要高，网页中显示的就#box p{...}中添加的样式。
案例2：
<div id="box">
<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
#box p{
width:300px;
line-height: 40px;
color:#fff;
background:#f00;
}
执行效果如下：
我这里给div中的p进行了两种方式的添加样式（ID选择器+类选择器、ID选择器+标签选择器），这里根据以上权重值的比较，将第一种方式的样式添加的第一级ID选择器（#box）与第二种方式的样式添加的第一级ID选择器（#box）进行权重比较，因为两个都是ID选择器，权重一致都是0100，所以我们要对两种方式第二级选择器进行比较，第一种方式的第二级选择器为类选择器（.text）权重为0010，第二种方式的第二级选择器为标签选择器（p）权重为0001，因为（.text）权重要大于（p）权重，所以网页中显示的就#box .text{...}中添加的样式。
案例3：
<div id="box">
<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
div p{
width:300px;
line-height: 40px;
color:#fff;
background:#f00!important;
}
执行效果如下：
这里我举的例子跟案例2是大致一样的，但细心的你们可能发现了我给第二种方式的background属性小小的改动了一下，给它添加了一个!important，根据上面css优先级规则的第三条：css属性后面加 !important 时，无条件绝对优先。所以即使第一种整体的权重值比第二种整体的权重值要高，但第二种方式中的background属性添加了 !important 比第一种方式中的background:lightgoldenrodyellow权重要高，所以网页中div的背景色采用的是第二种方式的background属性。
案例4：
<div id="box">
<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
#box .text{
width:300px;
line-height: 40px;
color:#fff;
background:#f00!important;
}
执行效果如下：
从上面css中可以看到两个选择器是一样的，所以它们的权重值是一样的。根据上面css优先级规则的二条：css选择规则的权值相同时，后定义的选择器规则优先，所以网页中显示的是后面定义的#box .text{...}中的样式。
案例5：
<div id="box">
<p class="text" style="background:blueviolet;line-height: 25px;color:#fff;">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
执行效果如下：
上面的例子，我给p标签添加了行间样式，根据css优先级规则： !important>行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器，所以p标签的行间样式地优先级比#box .text{...}要高，页面显示的是p标签的行间样式的效果，又因为p标签的行间样式中没有width这个属性，所以页面显示的是#box .text{...}中width这个属性。也就是说行间样式和相应选择器中都有的属性，优先执行行间样式的属性，没有的属性就在相应选择器中去找。
以上我只对二级选择器之间的权重问题进行了举例说明，多级选择器之间的权重比较是一样的比较方式。
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 😄 后续继续更新!!
