从 CSS 的权重规则看选择器及优先级

一时失言乱红尘 2022-05-27 05:43 239阅读 0赞

#### 一、CSS权重规则 ####

--------------------

CSS 的权重规则是学习 CSS 时非常重要的一个概念，**每个选择器都有自己的权重**。每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，**权重是一个决定哪种规则生效，或者是优先级的过程** ，因此了解权重规则，可以很好地理解 CSS中的选择器及其优先级，而不用去背繁杂的优先级规则。

#### 二、权重等级 ####

--------------------

一般来说，根据选择器的不同，我们将权重等级分为4个等级：

##### 1. 内联样式 #####

如： `<div class="box" id="box1" style="width: 100px; height: 60px"></div>`，此项权值为1000.

##### 2.ID选择器 #####

如上例使用 `#box1`，权值为100

##### 3.类，伪类和属性选择器 #####

*  类选择器如上例使用 `.box`；
 *  伪类选择器如 `:hover`, `:link`, `:visited`, `:active`，以及CSS3中新增的一些伪类选择器；
 *  属性选择器如`[class = "box"]`，`[id = "box1"]`

权值为10

> CSS3新增伪类举例：  
> \- p:first-of-type 选择属于其父元素的首个`<p>`元素的每个`<p>`元素。  
> \- p:last-of-type 选择属于其父元素的最后`<p>`元素的每个`<p>`元素。  
> \- p:only-of-type 选择属于其父元素唯一的`<p>`元素的每个`<p>`元素。  
> \- p:only-child 选择属于其父元素的唯一子元素的每个`<p>`元素。  
> \- p:nth-child(2) 选择属于其父元素的第二个子元素的每个`<p>`元素。  
> \- :enabled、:disabled 控制表单控件的禁用状态。  
> \- :checked 单选框或复选框被选中。

##### 4.元素选择器和伪元素选择器 #####

*  元素选择器如 div，p之类的
 *  伪元素选择器如 ::before，::after之类的

权值为1

#### 三、基本比较规则 ####

根据上面列出的4个权重等级，把所有等级的值相加得出选择器的权重值。

##### 牛刀小试： #####

*{}                         ====》0
     li{}                        ====》1(一个元素)
     li:first-line{}             ====》2(一个元素，一个伪元素)
     ul li {}                    ====》2（两个元素）
     ul ol+li{}                  ====》3（三个元素）
     h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素）
     ul ol li.red{}              ====》13（一个类，三个元素）
     li.red.level{}              ====》21（两个类，一个元素）
     style=""                    ====》1000(一个行内样式)
     p {}                        ====》1（一个元素）
     div p {}                    ====》2（两个元素）
     .sith {}                    ====》10（一个类）
     div p.sith{}                ====》12（一个类，两个元素）
     #sith{}                     ====》100（一个ID选择器）
     body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

##### 基本规则 #####

1、相同的权重：以后面出现的选择器为最后规则；  
2、不同的权重，权重值高则生效；  
3、!important最大，会覆盖所有