前面已经跟大家讲过我们css元素的三种模式，块级元素，内联元素，内联块元素。我们了解了它们的主要特性是如何相互转化的，今天我就来和大家聊聊css层叠样式的另一个知识点，也就是它的三大特性。css的层叠特性，说到层叠，可能会说有点乱。其实overlap是一样的，我个人的citrusoverlap更能形象的描述这个css特性。所谓层叠就是我们css样式前面的样式可以被后面重叠的样式覆盖。看看案例：还是我们最熟悉的div标签。我们已经为他设置好了宽高和背景色。发现我们给div中的文字颜色赋予了白色。然后我们重新定义一个div样式，把文字改成蓝色，但是最终显示的字体颜色是我们的蓝色。这就是为什么我们的级联可以理解为继承css“浪推前浪”。继承很好理解，就是子元素会继承我们父元素的样式属性。如下图所示，我们在我们的div标签中放了一个p标签和一个span标签。我们发现我们的子元素会继承父元素的文字样式，比如字体相关的样式，文字相关的样式，当然还有线条相关的样式还有我们的字体颜色。为了观察方便，我把line-height注释掉了。注意，我们发现我们的块级元素会继承父元素的宽度，而内联元素则不会。而通过上图，我们发现我们的a标签中的字体颜色并没有发生变化。即a标签不继承父标签的字体颜色属性。css的优先级是指我们的css样式被浏览器解析的先后顺序。优先级会给我们的css样式分配一个权重，浏览器会匹配权重高的样式进行解析。他和我们前面提到的css选择器有关。优先级的大致顺序是id选择器>类选择器>标签选择器>通配符。举个小例子：根据我们的层叠原则，后面的样式会和前面的样式重叠。此时我们发现div和one都指向了一个div，但是one的字体颜色属性并没有被div叠加。这也证明我们的类选择器的权重大于标签选择器的权重。优先权的权重其实有点复杂。我也会专门写一篇文章给大家介绍一下。想了解更多css层叠样式和前端开发，欢迎持续关注。
