css-层叠样式表的三大特性是什么

前面已经和大家聊过了我们css元素的三种模式，块级元素、行内元素、行内块元素、我们了解了他们大的特点已经如何相互转换，今天给大家聊一下css层叠样式的另一个知识点，就是它的三大特性。

css的层叠性，可能说层叠性大当家有点懵。其实说是重叠性也是一样的，而且我个人柑橘重叠性更能生动的描绘这一css特性。所谓的层叠性就是我们的css样式前面的样式可以被后面的样式给重叠覆盖掉。看一下案例：

还是我们最熟悉的div标签我们为他设置好了宽和高，以及背景颜色。发现我们已经给div里的文字颜色给了个白色。然后我们又重新定义了一个div样式，把文字改成了蓝色，可最后显示的字体颜色是我们的蓝色。这就是我们层叠性可以理解成“后浪推前浪”

css的继承性，继承性就很好理解，就是子元素会继承我们父级元素的样式属性。如下图，我们给我们的div标签中放一个p标签和一个span标签。我们发现，我们的子元素会继承父级元素的文本样式比如font相关样式，text相关样式，当然还有line相关样式和我们的字体颜色。为了方便观察，我把line-height给注释掉了。

注意，我们发现我们的块级元素会继承父元素的宽度，而行内元素不可以。而且通过上图我们发现我们a标签中的字体颜色没有发生改变。就是a标签不继承父级标签的字体颜色属性。

css的优先级，优先级的意思就是我们css样式被浏览器解析的先后顺序，优先级会给我们css样式分配一个权重，浏览器会匹配权重高的样式进行解析。他和我们前面讲到的css选择器有关。优先级的大致顺序就是id选择器>类选择器>标签选择器>通配符。稍微举个例子：

按照我们的层叠性原理，我们后面的样式会重叠掉前面的样式。此时我们发现div和one都指向一个div但是div没有层叠掉one的字体颜色属性。这也证明我们的类选择器的权重是大于标签选择器的。

优先级的权重其实有些许的复杂。我同样会专门写篇文章给大家介绍。如果想了解关于css层叠样式以及前端开发的更多知识请继续关注我。