携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
前言
前面我们对于如何编写简单的css以及它如何在浏览器上运行有了认知。接下来我们将会深入css的知识体系，了解如何通过css去布局排版样式化页面，让你的页面更加丰富多彩。本文将针对当css选择器的样式发生重叠时的状况该如何处理做出解释。
层叠
该怎么理解层叠呢？举个例子，比如我有两个css规则都应用于同一个元素，那么他会应用哪个规则呢？
<body>
<h1>hello</h1>
</body>
h1 {
color: red;
}
h1 {
color: blue;
}
通过网页上的效果我们可以得出它实际应用的是后面的css规则。这样的顺序关系只是css层叠样式中的一小点，还有诸如选择器不同时谁的优先级会更高、外部的样式文件和内部的样式表会采用哪个、重要程度不同时会采用哪个等...下面我们便来详细说说。
层叠在不止一个元素的时候怎么应用 css 规则
有三个因素需要考虑，根据重要性排序如下，前面的更重要：
- 重要程度
- 优先级
- 资源顺序
先从相对不重要的资源顺序开始说起。简单来说就是，当你使用两个相同权重（优先级）的选择器时，后面选择器的规则会被优先采用。
接下来是优先级，我们知道最常见的有类选择器、元素选择器、id选择器等。那么他们之间谁是“老大”，谁会先被采用呢？答案是
内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器(*)
现在我们只需要有个概念，更复杂的还有同时使用多种选择器，这些我们后面再细细探讨。现在还有一个重要程度通常使用!important来表示，但一般尽量不要采用它，下面是一些经验。
- 一定要优先考虑使用样式规则的优先级来解决问题而不是
!important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important - 永远不要在你的插件中使用
!important - 永远不要在全站范围的 CSS 代码中使用
!important
实例
我们现在知道了优先级顺序，那么我们可以再通过上面的小例子来测试一下。
<h1 class="classRule" id="idRule" style="color: yellow">hello</h1>
* {
color: grey;
}
.classRule {
color: green;
}
#idRule {
color: blue;
}
h1 {
color: red;
}
我们可以看到现在采用的是内联样式的规则也就是黄色。但当我们在任意选择器中加入!important就会显示对应选择器的颜色。
继承
继承从字面意思上理解就是从哪里得到什么，一般就是父代传授给子代。我们通过一个例子来说明。有一个无序列表ul有很多的子元素li，那么如果是有继承的概念的话，li元素是不是会与ul的样式全部一致呢？我们来试试看。
<ul class="father">
<li>hello</li>
<li>name:tom</li>
<li>age:16</li>
</ul>
.father {
color: red;
background-color: black;
border: 2px solid #ccc;
padding: 5px;
}
结果如图所示
可以看到只有color属性被继承了，如果其他的属性例如border、padding、width等属性也可被继承的话，那么页面的样式很可能不是我们所想要的，在一定程度上他是由常识可判断的。
