层叠的概念

前言

咱们先从CSS名称入手，CSS全称Cascading Style Sheets，大家都知道Style Sheets的意思是样式表，就是由咱们写的无数的选择器组成的样式，那么Cascading层叠是什么意思，为什么把我们写的样式表叫‘层叠’样式表？咱们来看看下面这个页面代码：

层叠的概念

这个页面代码里引用一个外联样式和一个内联样式，同时对标签p和span定义了相应的样式，最后在页面里呈现出了一个蓝色加粗的p和一个红色的span。大家心里肯定都知道这是因为根据不同的样式优先级发生了覆盖现象，像下图这样：

没错，事实就是如此，不过一个页面的呈现不只有这两种样式来源，而无数的样式来源之间根据优先级相互覆盖的现象就是我们说的’层叠’，根据’层叠’最后生成的样式表就是我们最后页面上真正用的到样式。说到这里，咱们看看一个页面的呈现到底需要考虑几种样式来源：样式来源