CSS层叠概述

什么是层叠：

层叠是一种机制，用于解决CSS声明冲突（多个相同的CSS声明属性，应用到一个元素上）

层叠的过程

层叠机制

• 比较优先级
• 比较特殊性

比较优先级

• 每一个声明都有一个优先级；
• 当发生冲突时，优先级高的会保留，优先级低的会被淘汰；
• 一个声明的优先级，与它的来源和重要性有关

解释来源

• 作者样式表
• 浏览器默认样式表
• 用户样式表

解释重要性

• 若属性值后面跟 ！important，则表示一条重要声明；否则，表示普通声明。

• 示例： color:red;普通声明
• color:red  ！important；重要声明

优先级从低到高

• 浏览器默认样式表中的声明
• 用户样式表的普通声明
• 作者样式表的普通声明
• 作者样式表中的重要声明
• 用户样式表中的重要声明

比较特殊性

• 每个声明都有一个特殊性(sepcificity)/特指值/特制度
• 当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰；
• 一个声明的特殊性取决于规则适用范围的大小
• 规则适用范围（范围最大的html和通用符选择器）越大，特殊性越低；适用范围越小，特殊性越高；

特殊性从高到低

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

比较特殊性——具体规则

在比较特殊性时，每一个冲突的声明会生成{a，b，c，d}，以比较特殊性a越大，特殊性越高；若a相同，则比较b；以此类推……

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

b：规则中ID选择器的个数

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

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

注：当计算并集选择器时，要分开计算

原文地址：https://www.cnblogs.com/date150219-/p/8849141.html