【css要点总结】003 级联

级联

文章中的demo无法实时预览，请移步至003 级联 获得更好的阅读体验。

有时候，有多个相同的css规则可以被应用于同一个元素。此时浏览器需要使用级联算法确定最后使用哪一个css规则进行页面渲染。

css是级联样式表（Cascading Stylesheets）。级联是解决当多个css规则被同时应用于一个html元素时产生的冲突的一种算法。正因为级联，下面的按钮才会被渲染成蓝色：

<style>
    button {
        color: red
    }
    button {
        color: blue;
    }
<style>

...

<button>This is bluebutton>

理解级联的目的，就是为了理解浏览器是如何解决此类冲突的。级联算法分为以下四个模块：

• 位置和出现的顺序：css规则出现的顺序。
• 特征性（具体性 Specificity）：确定css选择器具有最高匹配权的算法。
• 来源： css在何时何处生成。它是否是一个浏览器样式或者是浏览器插件添加的样式，又或者是你写的css代码。
• 重要性：一些css规则具有更高的重要性，特别是包含!important值的规则。

一.位置和出现的顺序

级联规则在解决css规则冲突时，会考虑css规则出现的位置和顺序。

一般一个页面可能包含多种来源不同的css样式。例如标签引入的css文件、