css优先级是如何规定的（CSS优先级-权重叠加计算）

• 先上总结:

a. 说明:

i. 公式: (行内, Id, 类, 标签)

ii. 规则: 从左至右依次做个数上的比较, 如果同级数量一致, 则比较下一级个数, 直到某一级数量不一致, 则数量较大的一方选择器的优先级较高, 后面的数量就无需比较了
  
  
  
  
  
  
 。 如选择器1 (0, 0, 1, 0), 选择器2 (0, 0, 0, 3), 那么选择器1的优先级高于选择器2 
  
  
  
  
  
 。如果所有的数值都一致的话, 说明两选择器相同, 那就依据css层叠性的特点. 浏览器会选择后一个选择器

b. 备注:

i. 权重叠加计算不是正常的加法计算, 不需要逢十进一 


 


 


 


 


 


 
。 如标签是11 类是0 那么只可以是 (0, 0, 0 , 11), 不能是(0, 0, 1, 1)

ii. * 通配符没有权重

iii. 无论父标签用了什么选择器并设置了什么样式, 对子标签来说都是继承, 继承的优先级永远是最低的
 
 
 
 
 
 
。

• 准备:

之后为了能更好地查看结果, 设置点字体样式, 由于咱代码简单, 就使用一个通配符选择器设置样式

* {

font-family: 楷体;

font-size: 60px;

}

• 代码示例说明:

1. 同级数量的比较

a. 先写一个p标签选择器, 运行一下效果

/* （0, 0, 0, 1） */

p {

color: blue;

} b. 再写一个后代选择器如下, 再运行一下效果

/* (0, 0, 0, 2) */

div p {

color: aqua;

}由于后者标签数量高于前者标签数量, 所以后者选择器高

建议: 可以把b步骤的代码放在a步骤的前面 ,这样可以更好地体现优先级的关系(优先级是没有层叠性的特点), 可以更好地排除层叠性的可能(虽然根本就没这可能, 只是方便理解), 以下示例皆是如此

2. 不同级别的比较

a. 设计一个类构造器

/* (0, 0, 1, 0) */

.son {

color: darkslategray;

由于类级别比标签高, 所以.son 选择器的优先级别高于div p选择器

3. 统配符没有权重的问题

首先优先级是没有层叠性的特点的, 这个在建议中也有描述  
   
   
   
   
   
  。

其次咱可以假设它具备权重, 那样的话它就不会有层叠行的效果

a. 先写一个p标签选择器, 样式和之前的一样

p {

color: blue;

} b. 之后在它的后面写一个* p选择器

* p {

color: yellowgreen;

} 查看效果是文字的颜色是yellowgreen 

 

 

 

 

 

 
。

c. 接下来把* p选择器的代码放在p选择器之上
  
  
  
  
  
  
 ， 再运行

这时候会发现字体颜色由原来的yellowgreen变为了blue

 

 

 

 

 

 
。这就说明它并没有体现优先级, 而是体现出了层叠性的效果, 所以说通配符在权重叠加计算中没有任何权重

• 示例代码:

以下是我的实例代码, 请参考

• 备注: