CSS 层叠性和继承性

层叠性

一个HTML标签可以由多个CSS选择器来共同设置样式，那如果设置的样式有冲突，哪个选择器说了算？这就是层叠性要研究的。

比如，现在有一个HTML标签 ↓

它同时被三个CSS选择器作用 ↓

浏览器显示它是红色的 ↓

为啥呢？这里就要引入一个非常重要的概念：权重

权重

权重，简单的说就是一个CSS选择器重要的程度，权重越大，越重要

怎么算一个CSS选择器的权重呢？

权重计算方法：

1. 先看一个CSS选择器中 id class 和 标签 的数量，然后按照：id 数量、class 数量、标签 数量 的顺序排好
2. 然后比较权重，从左到右，看谁的 id 数量大，如果同样大，就继续比较下一个 class 数量，再一样就继续比较下一个 标签 数量
3. 最大的就是权重最高的，也就是样式发生冲突时，听谁的
4. 如果几个CSS选择器的权重都是一样的，那谁写在最下面，就听谁的

id 选择器权重 > class 选择器权重 > 标签 选择器权重

所以上面的字是红色的

我们具体一点： 有如下的HTML结构 ↓

CSS选择器 如下 ↓

浏览器显示字体颜色为 蓝色 ↓

然后我们来解析上面的权重计算过程 ↓

把每个CSS选择器的id数量、class数量、标签数量，从左到右排序，逗号分隔，

显然蓝色权重最大，所以是蓝色，可以打开Chrome浏览器检查 ↓

继承性

有一部分CSS属性是有继承性的，意思就是给祖先元素设置了这个样式，祖先元素里面的所有后代元素都拥有了这个属性

• color
• list -
• text -
• font -
• line -

可以发现，有继承性的样式都是关于文字和列表的

比如：

设置CSS样式 ↓

浏览器显示后代元素的字体颜色都为红色 ↓

这里的color样式设置到了.box的div上，没有直接设置到p上，但是p是它的后代元素，所以color就被p继承了

可以打开浏览器检查，显示 p 的样式继承自 div.box ↓

这里要说一下，通过继承而来的样式的权重，一定比不过直接选中的！

例子：

CSS样式中，颜色 red 是继承到 p 上的，颜色 blueviolet 是直接选中到 p 上的，所以最终浏览器显示颜色是 blueviolet ↓

如果发生冲突的样式，都是通过继承来的，那就要遵循 “就近原则”

意思就是如果发生冲突的样式都是继承来的，就比谁距离最内层的文字所在的标签 近！

换句话说：爸爸比爷爷的权重大，爷爷比太爷爷权重大。。。

例子：

上面的CSS中，.box3 距离最内部的 p 标签最近，所以最后 p 是 green 绿色的 ↓

CSS 样式冲突一句话

先比谁距离最内层标签近，如果都一样近，则数id数量，类数量，标签数量比权重，如果权重再一样，则比谁写在下面