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这个属性。也就是说行间样式和相应选择器中都有的属性，优先执行行间样式的属性，没有的属性就在相应选择器中去找。

以上我只对二级选择器之间的权重问题进行了举例说明，多级选择器之间的权重比较是一样的比较方式。

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!