继承和层叠

什么是继承

继承（inherit），是指子元素会自动拥有父元素的一些CSS属性

继承必须具有传递性

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

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

• 可被继承的属性：文本样式

• 不能继承的属性：display属性

继承发生的场景

一个元素的某个CSS属性，只要满足下面两个条件，才会继承父元素：

• 该样式是可继承的属性
• 该属性在样式表中没有声明

强制继承，也叫显示继承，是指将css属性值设为inherit

这样做有两个原因

• 为了继承有些不可以继承的属性
• 为了继承已被声明过的属性

声明冲突：当相同的属性名不同属性值运用到同一个元素上就会发生声明冲突，浏览器会自动触发层叠机制

层叠概述

什么是层叠：

层叠是一种机制，用于解决声明冲突

层叠过程

1、比较优先级

2、比较特殊性

3、比较源次序

比较优先级：

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

若属性后面加!important(重要性),则表示一条重要声明，否则为普通声明

    /* 重要声明 */
    color: blue !important;
    /* 普通声明 */
    color:black;

比较特殊性：

每一个声明都有一个特殊性（specificify）

一个声明的特殊性，取决于规则的是和范围的大小

范围大特殊性小，反之范围小特殊性大

行内样式>ID选择器>类选择器(伪类选择器)>元素选择器>通配符选择器

在比较特殊性时，每一个冲突的声明，会生成4个数字a，b，c，d以比较特殊性

a越大，特殊性越高，若a相同则比较b，b越大，特殊性越高

• a：若声明是行内样式，则为1，否则为0
• b：规则中ID选择器的个数
• c：规则中类选择器的个数、伪类选择器和属性选择器的个数
• d：规则中元素选择器、伪元素选择器的个数

比较源次序

若前两步都相同就比较先后顺序