css属性值的层叠冲突规则

css属性值的层叠冲突规则

层叠冲突:同一个样式,多次用到同一个元素,就会发生层叠冲突,需要对样式表有冲突的申明使用层叠规则,确定css属性值

步骤1. 比较重要性,若css属性后面加有 !important ,就表示该属性值的优先级最高,就会使用该值作为当前属性的值(一般不用)

color: #000000 !important;

步骤2. 若步骤1无法比较,则比较特殊性

总体规则:选择器选中的范围越窄,越特殊

具体规则:通过选择器,计算出一个4位数(****),数值越大,属性值的优先级越高

  1. 千位:若果是内联样式,记1,否则记0
  2. 百位:等于选择器中所有id选择器的数量
  3. 十位:等于选择器中所有类选择器,伪类选择器,属性选择器的数量
  4. 各位:等于选择器中元素选择器,伪元素选择器的数量

步骤3. 若步骤2无法比较成功,则比较源次序,代码书写越靠后,优先级越高

原文地址:https://www.cnblogs.com/yloved/p/13056004.html