✍️ 作者简介: 前端新手学习中。

作者主页: 作者主页查看更多前端教学

专栏分享：

层叠冲突

层叠冲突是指在CSS中，当多个样式规则应用于同一个元素并且具有相同的特定性时，浏览器需要确定哪个规则应该生效的过程。这种情况通常发生在多个样式表或多个选择器应用于同一个元素时。
为了解决层叠冲突，浏览器会使用一组称为层叠规则的标准来确定哪个样式规则应该生效,分为三个步骤比较重要性，比较特殊性，比较原次序
这些规则考虑了样式规则的来源、特定性和顺序。
例如，内联样式优先于外部样式表中的样式，ID选择器优先于类选择器，
而后定义的规则优先于先定义的规则。

比较重要性
从高到低

1. 带有important的作者样式
2. 带有important的默认样式
3. 作者样式
4. 默认样式

例

     *{    font-size: 16px; }        
坚毅的小解同志

用户样式表高于默认样式表

比较特殊性

style	id	属性	元素
是否内联	id选择器的数量	属性，类，伪类选择器的数量	元素，伪元素的数量

例

        body h1 {        font-size: 10px;      }      /* (0,0, 0, 2) */      body .h1 {      font-size: 8px;      }      /* (0,0, 1, 1) */      * {        font-size: 16px;      }      /* (0,0, 0, 0) */            
坚毅的小解同志
  

比较原次序

如果还有冲突，我们可以在这一步比较顺序，最新写的有效果。
例

       body h1 {        font-size: 10px;      }      /* (0,0, 0, 2) */      body h1 {        font-size: 8px;      }      /* (0,0, 0, 2) */      * {        font-size: 16px;      }      /* (0,0, 0, 0) */            
坚毅的小解同志
  

继承

我们前两步实际上将作者书写的属性进行乐一个筛选得到了作者的值，但是仍然有许多没有设置值的属性，这个时候我们就会来到继承这一步，并不是所有的属性都会被继承，一般可以继承的值都是文本类型的值。
我举个例子大家就能理解了。

例

       div{        color: red;      }                
坚毅的小解同志
  

给外面的div标签 将颜色设置成红色，里面的h1标签没有设置color颜色，于是继承了父级标签，也变成了红色，这就是继承。

使用默认值

不能继承，作者也没有设置属性，那么就会使用默认属性。

总结

注意 前两部是筛选作者属性，第一步对比的是作者属性，和浏览器默认属性（作者代写属性）， 大家需要把浏览器默认属性，和默认属性分开。
学习css 属性计算是一个非常重要的基础，需要好好学习。