层叠与继承

继承与层叠机制

继承

• 继承（inherit），是指子元素会自动拥有父元素的某些CSS属性。
• 强制继承：也叫做显式继承，是指将CSS属性值设置为inherit。
• 强制继承原因：
  • 1、为了继承有些不可继承的属性。
  • 2、为了继承已被声明过的属性。

层叠机制

概念

• 层叠是一种机制，用于解决声明冲突
• 当相同属性名不同属性值，应用到同一个元素上就会产生声明冲突，浏览器会自动触发层叠机制。

层叠的过程

• step1、比较优先级
  • 每一个声明都有一个优先级。
  • 优先级低的声明会被淘汰，优先级高的声明胜出。
  • 一个声明的优先级，与它的来源（用户样式表>作者样式表>浏览器）和重要性（属性值后面加上：!important，则表示一条重要声明，否则，表示普通声明。）有关。
  • 优先级比较：用户样式表中的重要声明>作者样式表中的重要声明>作者样式表中的普通声明>用户样式表中的普通声明>浏览器默认样式表中的普通声明
• step2、比较特殊性（特指度）
  • 每一个声明都有一个优先级。
  • 一个声明的特殊性，取决于规则适用范围的大小。规则适用范围越大，特殊性越低，适用范围越小，特殊性越高。
  • 行内样式>ID选择器>类选择器>元素选择器>通配符选择器
  • 具体规则
    • 在比较特殊性时，每一个冲突的声明，会生成4个数字（a,b,c,d），以此比较特殊性。a越大，特殊性越高，若a相同，则比较b，b越大，特殊性越高，依次类推。
    • a：若声明是行内样式，则为1，否则为0。
    • b：规则中ID选择器的个数。
    • c：规则中类选择器、伪类选择器和属性选择器的个数。
    • d：规则中元素选择器、伪元素选择器的个数。
• step3、比较源次序
  • 哪个写在后面，就执行哪个。