HTML & CSS - CSS层叠与继承 | 王富杰的博客

一、层叠

有些元素浏览器会内置默认的样式，我们也可以自己来写样式。例如假设浏览器默认设置了color，我们写的css也写了color。针对这种同一个样式属性多次应用到同一个元素的情况称之为声明冲突。当然我们自己写的样式之间也会有冲突。这些冲突的样式最后只有一个样式能胜出，解决声明冲突的过程就叫重叠，也叫权重计算。

解决冲突是浏览器负责解决的，解决冲突的过程分为以下三步：

1.1、比较重要性

重要性由高到低分别是 !important -> 普通样式 -> 浏览器默认样式。普通样式指的是我们书写的样式。

a{
    color: red !important
}

如上，声明了一个!important样式，它的重要性最高，但是一般不建议使用，使用了!important过多代码的可读性和可维护性都会很差。

我们可以利用重要性来重置样式表，例如不同的浏览器的默认样式可能不一样，我们的网页在不同浏览器上想渲染一样的效果就不能依赖默认样式。因此在项目开始时一般会写一些基础样式来覆盖浏览器的默认样式。重置样式表一般不需要自己书写，网上有一些现成的，如reset.css、normalize.css。

1.2、比较特殊性

如果冲突重要性是一样的，就需要进一步比较特殊性。选择器选择的范围越窄就越特殊。浏览器会通过选择器计算出一个四位数 0000 ，这个四位数越大，特殊性越高。

千位：内联样式记1, 否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器和伪类选择器的数量和
个位：等于选择器中所有元素原则器和伪元素选择器的数量和

注意：这里的四位数不是普通意义上的四位数，例如，如果个位超过了9会继续向上累加。最大好像能到255，当然我们一般也不会有这么长的选择器。

a {
    color: red,
    background-color: bule
}

a.selector{
    color: green
}

如上所示，这两个原则上的特殊性分别为（0, 0, 0, 1）和（0, 0, 1, 1）。如果一个a元素同时设置了class=“selector”，那它的颜色会被设置为绿色，红色就会被淘汰，因为绿色重要性更高。这里比较重要性先比较千位，如果千位大，那剩余的百位、十位、个位就不用比较了，依次类推。但是background-color依然都为蓝色，因为background-color这个样式并不存在冲突。

1.3、比较源次序

当两个选择重要性也一样的时候，就需要比较源次序，即源代码的书写顺序，代码书写靠后的胜出。

div .sellector{
    color: green
}

.nav a{
    color: red
}

如上这两个css规则的重要性都是（0, 0, 1, 1），当一个元素同时满足这两个选择器，就会应用红色，因此它书写更靠后。

二、继承

继承指的是子元素会继承父元素的部分css属性。通常来说和文字相关的属性都能被继承。当需要知道一个属性是否会被继承可以查mdn手册。比如字体颜色是可以继承的。

<style>
    div{
        color: blue;
        background-color: red;
       }
</style>


<div>
    <p>Lorem, ipsum dolor.</p>
    <h1>Quisquam, perspiciatis aliquam?</h1>
    <p>Autem, nulla assumenda.</p>
</div>

如上所示，p元素和h1元素的颜色都是蓝色，背景色都是红色。通过浏览器可以看到如下：图片加载失败可以看到p元素继承了div的字体颜色。但是背景颜色是灰色的，说明背景颜色不能被继承。那为什么页面显示背景是红色的呢。那是因为div的背景颜色为红色，但是p元素默认的背景颜色是透明的，因此显示出了div的背景色。可以通过浏览器的计算样式来查看p元素的背景色为rgb(0,0,0,0)。最后一个为透明度，默认是透明。当设置不为0时，就可以看到p元素的背景色不再为红色了。

2.1、强制继承

如果元素已经有了某个属性值，那它就不会继承父元素的属性。但是如果又想使用父元素的属性，就可以强制继承。如：

a{
    color: inherit
}

如上所示，这样a元素就会强制继承父元素的颜色属性。

三、CSS属性值的计算过程

浏览器渲染一个元素的前提是，该元素的所有CSS属性都必须要有值。一个元素所有属性从没有值到有值的过程就是CSS属性值的计算过程。这个计算涉及四个步骤

确定声明值：样式表中没有冲突的声明，直接作为CSS属性值
层叠：样式表中有冲突的声明，使用层叠规则确定CSS属性值
继承：前两步结束后，依然没有值的可继承属性，则继承父元素的值
- inherit：强制继承，本来不会继承的属性也可以强制继承
- initial: 属性的初始值，如果想直接使用初始值，可以在设置属性时使用这个单词
使用默认值：做完前三步，依然没有值的属性则使用默认值。

页面渲染时会先从html元素开始渲染计算属性值，依然往下按照以上四个步骤进行计算并渲染。

最后看一个场景，我们再第六章的示例代码中加一个a元素，显示时a元素并没有变红。因为浏览器对a元素有默认样式，因此第一步确定声明值就有了color属性，因此到第三步就不会继承了。但是可以手动写css规则来强制继承，注意：如果强制继承的规则出现属性冲突，那它也是会进程层叠的，层叠如果强制继承的规则优先级更低，那这个强制继承的规则不会生效。

「真诚赞赏，手留余香」

HTML & CSS - CSS层叠与继承

CSS层叠与继承