一丶CSS层叠样式表的层叠是什么意思？
层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。这句话我是mdn照搬过来的，接下来我们先了解一下什么是CSS的源，和什么是CSS的规则。
1. CSS声明内容的源
css的样式来自于三个源，分别是：
- 用户代理（user agent stylesheet），浏览器的基本默认的样式，例如body的margin属性，不同浏览器会有较大或较小差异。
- 网页作者，我们最常见和使用的样式，网页开发者所写的样式。
- 读者，作为浏览器的用户，可以使用自定义样式来定制体验，这个不常见就不详细讲了。
即便css样式会来自不同源，它们的作用范围也是重叠的，也就是它们的内容基本都会参与层叠计算的，多个来源会根据其重要程度来决定层叠顺序。
下方是不同来源的例如下图所示页面作者比用户代理（user-agent-stylesheet）的优先级要低，所以我们第一段中的代码给a标签声明的color就覆盖了用户代理的声明。
2.CSS的规则
CSS的普通规则都会参与层叠计算的，但是@规则只有适合的内容才会参与层叠计算，并且部分@计算规则不同，例如@import和@charset是不受层叠计算的规则影响的。类似@font-face这种规则是根据其描述符font-family来确定的。
-
普通规则：
也就是我们最常用的css样式书写规则，语法如下
选择器{属性：值}
基本概念和语法规则传送门 -
@规则
@规则是一个css语句，语法比较多样化，但都是以@符号开头。
@规则mdn传送门
3.一段简单的多源的示例。
下方这段代码，我们可以看出，我们给a标签声明了一个规则，其源属于页面作者，包含了属性color，我们的所定义的属性覆盖了a标签来自用户代理源（user-agent）的属性，这种特性被称为层叠（层叠性）。
<style>
a{
color:red;
}
</style>
<body>
<a href="">链接</a>
</body>
我们可以通过下方浏览器控制台的截图来看，我们的声明覆盖了来自user agent stylesheet的声明。
注：并非是涉及到多源的css代码才叫层叠，即便是只来自于单源的css代码，也是具有多层的相互作用的情况，例如我们给a标签加一个class再加一个id等等，或者内联代码和外联代码。
4.总结一下
只要是符合css语法规则的声明样式，基本都具有层叠性，少部分@规则（at-rule）的声明不具有层叠性。
参考内容
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade
http://c.biancheng.net/css3/at-rule.html
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
