css的层叠性举例（层叠样式表中的）

提起“层叠”，首先能让我想到什么呢？

深夜还饥肠辘辘的你，是不是又在放毒了。 那我们就言归正传，上图就能很清楚地表达出我所说层叠的含义， 相信看到这里你也会印象深刻。

就是一层覆盖着一层，在CSS中的含义是每一个元素的属性只可以被层层覆盖， 低优先的层级被高优先的层级所覆盖。 举例来说，比如网页中的一个段落，在Interal CSS中定义的样式是它的背景颜色是透明的， 但是在Inline CSS中它的背景颜色是蓝色的， 最终网页展现在用户面前的背景颜色是蓝色的，原因我之前讲过Inline CSS比Interal CSS的优先级来的高。 所以蓝色覆盖了透明色

HTML中的一个元素的某一个样式属性，它可能有很多的不同的属性值， 它们之间存在相互竞争的关系， 最终渲染出来的结果是由浏览器将该属性值按次序（从低优先到高优先）一一列举，最后的幸存者获胜（最后一个申明的属性值）

在CSS中有三种类型的样式表, 分别是 User-agent style sheets, Author stylesheets, 和User stylesheets （这里我就不按字面翻译了）

这种是浏览器默认自带的样式，一般来说优先级最低。不同的浏览器自带的样式会有所不同，但这种不同非常细微。 既然我们网页开发人员可以编写CSS，为什么还需要浏览器默认的样式表呢？ 原因用它来兜底， 当出现网页开发人员定义的CSS找不到或加载错误的时候， 浏览器会用降级用它自己默认的样式表来呈现网页中的内容

这种样式表是网页开发人员编写的CSS，它的优先级高于浏览器自带样式表

用户样式表是指最终用户在浏览器上设置的样式表，它具有最高的优先级。能够覆盖前两种样式表。 这种样式表存在的意义，一般来说，是对于残障人士提高他们使用和浏览网页的体验而产生的。 比如超大字体和超高对比度，这些对于我们一般用户来说都用不到，但对于他们来说则是必须。 因为是用户设置的样式表， 所以应用仅局限于用户本地（其他用户不会受到影响）