CSS属性的特性_层叠性

CSS中层叠的概念：

• 对于一个元素来说，相同一个属性我们可以通过不同的选择器给它进行多次设置；
• 那么属性会被一层层覆盖上去；
• 但是最终只有一个会生效；

那么多个样式属性覆盖上去，哪一个会生效呢？

• 判断一：选择器的权重，权重大的生效，根据权重可以判断出优先级
• 判断二：先后顺序，权重相同时，后面设置的生效；

层叠性的影响因素：

1. 选择器类型决定基础权重：

   选择器类型	权重示例
   内联样式	1,0,0,0
   ID选择器	0,1,0,0
   类/属性/伪类选择器	0,0,1,0
   元素/伪元素选择器	0,0,0,1
   通配符/继承	0,0,0,0

2. !important的特殊地位

   • !important可强制提升样式优先级，但应谨慎使用

   p { 
     color: red !important;  /* 覆盖所有普通声明 */
   }
   

   • 使用场景：
     • 覆盖第三方组件样式
     • 修复紧急样式问题
     • 避免过度使用导致维护困难

3. 继承样式的权重为0

   • 继承的样式权重始终为0，即使父元素权重很高

   #parent { 
     color: red; /* 权重：0,1,0,0 */
   }
   /* 子元素.child的color: blue会覆盖继承的red，因为继承权重为0 */
   .child { 
     color: blue;  /* 权重：0,0,1,0 */
   } 
   

权重累加：

• 原则：相同类型的多个选择器会相加计算

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	0	0001
h1 + p: first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifer	0	1	0	0	0100
内联样式	1	0	0	0	1000