CSS 基础回顾 - 层叠、优先级和继承

层叠指的是决定同一个DOM元素的样式定义的一系列规则。它决定了如何解决冲突，是CSS语言的基础。

下面分析层叠的规则。当生命冲突时，层叠会依据三种条件解决冲突。

• 样式表的来源： 样式从哪来的，包括你的样式和浏览器默认样式等。
• 选择器优先级：哪些选择器比另一些选择器更重要。
• 源码顺序：样式在样式表里的声明顺序。

样式表来源

你添加到网页中的样式表并不是唯一使用的样式表，包括你的样式和浏览器默认样式等。

! important声明 ：样式来源规则有个例外，标记为重要（important）的声明。 优先级从高到低：! important声明 => 作者样式表 => 浏览器样式

理解优先级

如果无法用来源解决冲突声明，浏览器会尝试检查它们的优先级。

浏览器将优先级分为两部分：HTML的行内样式和选择器样式。

1. 行内样式

行内样式会覆盖任何来自样式表或者<style>标签的样式（import 例外）。行内样式没有选择器，因为它们值作用域所在元素。

2. 选择器优先级

不同类型的选择器有不同的优先级：

ID选择器 > 类选择器 > 标签选择器

实际上，ID选择器的优先级比拥有任意多个类的选择器都高。

优先级的准确规则如下。

• 如果选择器的ID数量更多，则它会胜出（即它更明确）
• 如果ID数量一致，那么拥有最多类的选择器胜出。
• 如果以上两次比较都一致，那么拥有最多标签名的选择器生出。

❝

伪类选择器（如： hover）和属性选择器（如[type=“input”]）与一个类选择器的优先级相同。通用选择器（*）和组合器（>、+、~）对优先级没有影响。

❞

这个概念很简单，但是如果不理解优先级，那就弄不清楚为什么一个规则能生效，另一个却不能。

3. 优先级标记

一个常用的表示优先级的方式是用数值形式来标记，通常用逗号隔开每个数。如： 1,2,2表示选择器由1个ID、2个类、2个标签组成。优先级最高的ID排在第一个，紧接着是类，然后是标签。

[image:B19764DB-4D70-47ED-A016-CF368B93452D-90240-0001B55CAF5326F4/29069885-F574-44AA-A8E8-75D544DEBFF6.png]

现在通过比较数值就能决定哪个选择器优先级更高（更明确）。“1,0,0”的优先级高于“0,2,2”甚至“0,10,0”（尽管我不推荐写一个长达10个类名的选择器），因为第一个数（ID）有最高优先级。

还可以用4个数字来标记，第一位用0或1来表示，是否是用行内样式添加，1,0,0,0。

4. 源码的顺序

层叠的最后一步，是源码顺序。如果两个生命得了哀怨和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明生出。 也就是说，优先级相同时，后出现的样式会覆盖先出现的样式。

5. 两条经验法则

• 在选择器中不要使用ID。就算使用一个ID,也会大幅提升优先级。很难覆盖这个样式。
• 不要使用 !important。它比ID更难覆盖，一旦用它，想要覆盖原先的声明，就必须再加上一个!important。

继承

还有最后一种给元素添加样式的方式：继承。 如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。

不是所有属性都能被继承：

• 主要是跟文本相关的属性： color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
• 列表属性：list-style、list-style-type、list-style-position 以及 list-style-image
• 表格的边框属性 border-collapse 和border-spacing
• … (以上为不完全枚举)

特殊值

• inherit: 当想用继承来代替一个层叠值时，用它来覆盖另一个值，这样元素就能继承其父元素的值。
• initial: 每个CSS属性都有初始值，使用它来将属性充值未默认值。注： auto 不是所有属性的默认值。

总结

• 控制选择器的优先级
• 不要混淆层叠和继承
• 某些属性会被继承，包括文本、列表、表格边框相关属性
• 不要混淆initial和auto值

本文使用 mdnice 排版