CSS总结——层叠

CSS全称叫层叠样式表，那么为什么CSS叫做层叠样式表呢？首先我们需要了解下什么冲突规则

冲突规则

在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个规则同时对相同的元素生效。我们需要在冲突发生时决定应该使用那一条规则。

层叠

Stylesheets cascade（样式表层叠） 简而言之，CSS规则的顺序非常重要，当两条同级别的规则应用到同一个元素的时候，写在最后的就是实际使用的规则。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}

<h1>This is my heading.</h1>

结果

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用那个规则，基本上是衡量选择器具体选择那些区域的尺度。

类选择器

类选择器更加具体——它会选择该页面中有特定class属性的元素，所以它的优先级更高。

元素选择器

元素选择器不是非常具体——它会选择页面上该类型的所有元素，因此它的优先级就低一些。

例如：

.main-heading { 
    color: red; 
}
        
h1 { 
    color: blue; 
}

<h1 class="main-heading">This is my heading.</h1>

结果

继承

继承是指一些设置在父元素上的CSS属性可以被子元素继承的，但是并不是所有的都能继承。
例如：我设置body元素为蓝色，然后文档中每个body元素都是蓝色，除非像这样在span元素上设置属性。

body {
    color: blue;
}

span {
    color: black;
}

<p>像这样字体颜色设定为蓝色，这是通过继承实现的</p>
<p>我们可以通过选择器其来改变元素的颜色，像这个<span>例子</span>.</p>

结果

不过像widths，margins，padding，borders这些属性的值往往不会被继承，从某种程度上来说，那个属性会默认继承是由常识决定的。

继承的控制 inherit

本属性会使子元素属性和父元素相同，实际上就是开启继承

initial

设置属性值与浏览器默认样式相同，如果浏览器的默认样式没有设置，且这个属性是自然继承的那么会设置为inherit

unset

本关键字将属性重置为自然值，也就是如果属性是自然继承的那么就和inherit一样，否则就会和initial一样.
例如

body {
    color: green;
}
          
.my-class-1 a {
    color: inherit;
}
          
.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}

<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>

结果：

由此可见继承中也体现了顺序，这样我们引出了层叠中最后一个影响因素——资源排序

资源排序

如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。

以上就是我对CSS中层叠的理解了，如果有遗漏之处，欢迎小伙伴斧正哦。