CSS中样式中的层叠与继承

一、对标题的解释：

什么叫做层叠？什么又叫做继承？
就是在我们实际写项目的时候，我们会常常会写一些样式，这些样式会被应用于我们的元素中。但是如果我们的项目比较大的话，或者我们一个元素在不同的位置想要使用不同的样式，这个时候，我们会发现我们写的样式显示出来的样子不是我们想要的。这个时候，就涉及到层叠与继承了。

首先：层叠是一个定义了如何合并来自多个源的属性值的算法。然后浏览器根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。将层叠与优先级结合在一起，就可以比较好理解。如果我们对一个元素写了多个样式，谁的优先级高那么它就应用那个样式了。与此同时，我们可能也会想到另外一个点，就是如果我们整个页面中的字体都一样的，然后里面运用的选择器数量有很多，那么我们并不想在每个选择器中都写相同的字体样式，这个时候，就引出了我们i第二个概念，就是继承。有了继承，我们可以不写那么多的字体样式。

二、它们三个是如何工作的呢？
首先，我们得记得元素的优先级中id选择器>类选择器>元素选择器。如果我们选择器都是一样的情况下，后面的优先级会高于前面。然后我们继承的话，我们子元素会继承父元素的样式（除了width margin padding border)当我们想在这个元素下使用新的元素样式，那么我们可以使用id选择器，重新写一个样式。

然后我们在继承中也可以使用如下的元素，获得不同的继承样式：
inherit——设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。

initial——将应用于选定元素的属性值设置为该属性的初始值。

revert (en-US)——将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。

revert-layer (en-US)——将应用于选定元素的属性值重置为在上一个层叠层中建立的值。

unset——将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

案例：

 

<!DOCTYPE html>
<html>
    <head>
        <title>test1</title>
        <style type="text/css">
            body {
    color: green;
}
          
.my-class-1 a {
    color: inherit;
}
          
.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}
        </style>
    </head>
    <body>
        <ul>
            <li>Default <a href="#">link</a> color</li>
            <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
            <li class="my-class-2">Reset the <a href="#">link</a> color</li>
            <li class="my-class-3">Unset the <a href="#">link</a> color</li>
        </ul>
    </body>
</html>

 

输出结果：

ios系统中样式层级调整 样式层叠如何处理_属性值