CSS继承、层叠

继承

什么是继承： 继承（inherit），是指子元素会自动拥有父元素的某些CSS属性，继承须有传递性

有些属性在页面的某个区域中具有通用性

若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿

背景色不被继承

继承发生的场景：

满足两个条件

1、该属性是可继承的属性（文本属性）

2、该属性在样式表中没有声明

注：该属性在子元素没有声明

强制继承：

强制继承，也叫做显示继承，是指将CSS属性值设置为：inherit

这样做，通常有两个原因：

1、为了继承有些不可继承的属性

2、为了继承已被声明过的属性

 

层叠机制

声明冲突： 同一个元素 属性名相同，属性值不同，产生了“声明冲突” 浏览器会自动触发“层叠机制”

 

层叠机制的工作原理

1、比较优先级

一个声明的优先级，与它的来源和重要性有关

来源： 作者样式表>浏览器默认样式表>用户样式表

重要性： ！important写在属性值后面，分号前面

2、比较特殊性

规则适用范围越大，特殊性越低，适用范围越小，特殊性越高 行内样式>ID选择器>类选择器>元素选择器>通配符选择器 特殊性从高到低 a:若声明是行内样式，则为1，否则为0 b：规则中ID选择器的个数 c：规则中类选择器、伪类选择器和属性选择器的个数 d：规则中元素选择器、伪元素选择器的个数 计算选择器分组的时候，要分开计算

3、比较源次性

后写的覆盖前面的