层叠

当有声明冲突的时候，浏览器会自动触发层叠机制

声明冲突：同一样式，不同的值，给同一个标签就会产生声明冲突

层叠的过程

1、比较优先级

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

来源：1.作者（开发者）样式表：外部样式表；内部样式表；行内样式表

2.浏览器默认样式表

3.用户样式表

优先级排序：用户样式表>作者样式表>浏览器样式表

重要性：若属性值后跟上！important，则表示一条重要声明，否则，表示普通声明

例：color：red；普通声明

color：red ！important；重要声明

2、比较特殊性（特指值/特指度）

每一个声明都有一个特殊性

一个声明的特殊性，取决于规则适用范围的大小，规则适用范围越大，特殊性越低；适用范围越小，特殊性越高

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

在比较特殊性时，每一个冲突的声明，会生成4个数字（a,b,c,d），a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，依次类推

a：若声明时行内样式，则为1，否则为0

b:规则中id选择器的个数，有1算1，有几个算几个

c：规则中类选择器，伪类选择器和属性选择器的个数，相加

d：规则中元素选择器，伪元素选择器的总个数

通配符选择器特殊性为0

当计算选择器分组（并集选择器）的时候，要分开计算

3、比较源次级

最后出现的声明胜出，其他的全部淘汰

该规则的实际应用：

CSS Reset 代码前置

CSS重置文件 Reset.css 解决兼容性

a元素的伪类书写顺序

继承

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

并不是所有css属性都可以被子元素继承

可被继承的属性：

color,font-size,font-weight,text-align（基本上文本类的样式都可以继承）

不可被继承的属性：

background-color

继承发生的场景

一个元素的某个css属性，只有满足以下两个条件，才会继承父元素：

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

强制继承

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

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

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

原文地址：https://www.cnblogs.com/lp1995/p/9217387.html