你必须知道的CSS权重

层叠

我们都知道CSS的全称是Cascading Style Sheets 也就是层叠样式表

那么当多个选择器同时选中一个元素时 会发生什么呢

这就是CSS需要解决的问题

• 声明冲突：同一个样式，多次应用到同一个元素

• 层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

---

1. 比较重要性

重要性从高到低：

1. 作者样式表中的 !important样式

2. 作者样式表中的普通样式

3. 浏览器默认样式表中的样式

作者样式表：开发者书写的样式

---

• 我们知道 class 选择器的权重是高于元素选择器的

但当元素选择器的背景样式设置了 !important 时， 重要性变得最高，所以优先显示

	<style>
		//元素选择器
        div{
   
            width : 100px;
            height : 100px;
            background: #008c8c !important; 
        }
        //class选择器
        .box{