css不是一种程序语言，而是一种描述语言。因此，可以说，css理解起来是非常容易的，大部分人通过简单的学习就可以懂得如何写css代码来定义网页的样式。但是，大部分人同样也会在写css的过程中产生很多困惑，比如为什么自己写的某段css没有生效，或者呈现出的样式和预计的不同，但又不知道要如何解决。
造成这些问题的主要因素，是css优先级。css优先级是css中最难理解的概念之一，但对于掌握css来说非常重要。理解css优先级，不仅有利于快速解决样式问题，而且能在布局层面，帮助我们写出更明晰，更合理的css代码。
什么是css优先级
css的组成单元是样式规则（CSS Rule），单条样式规则的形式如下：
其中，选择符（Selector）决定了后边所写的属性定义会作用到哪些元素，因此称为选择符。
css有一个核心特性，当多条样式规则中的同一个属性（比如padding）作用到了同一个元素，这些样式之间就会发生覆盖：
图中由前端调试工具所显示的，被划掉的css样式，不会呈现在这里选中的网页元素上，因为它们被覆盖掉了。css优先级，就是指在这种情况下，得出“应该由哪一条样式规则的内容覆盖掉其他的”这个结论的过程中所遵循的原则。更一般的表述是，优先级高的css样式，将覆盖优先级低的css样式，成为最终网页元素的实际样式。
注意，前端调试工具显示的，”被划掉“的css样式，并不是说一定是完全覆盖。css中的一些组合属性（比如margin，可以拆分为margin-top、margin-right、margin-bottom、margin-left），在这种样式覆盖中遵循的是局部覆盖的原则，即使在前端调试工具中它们看起来“整个都被划掉了”：
css优先级的影响因素
css优先级的影响因素要考虑三部分内容，css选择符权重、!important标识符、属性继承。很多文章都阐述过css选择符权重这一点，但后面两部分却很少被提及。本文会依照这三部分做详细的说明。
属性继承
css中一部分属性是可继承属性，比如文本颜色color。css优先级的讨论，首先应认清css中的属性继承所带来的影响。由于存在可继承属性，一个网页元素的样式来源可以分为两类：
由css选择符直接定义到元素本身的样式。
css选择符未作用到，但继承自父级元素的样式。
定义到元素本身的样式，包括浏览器默认样式，一定比继承得到的样式优先级高。因此，可以这样认定：继承得到的样式的优先级是最低的，在任何时候，只要元素本身有同属性的样式定义，就可以覆盖掉继承值：
而且，继承样式是最低优先级这一点，是无视继承样式所在的样式规则的内容的。这就是说，继承样式所在的样式规则，即使其选择符的权重比元素本身样式的选择符的权重更高（本文后文会介绍选择符权重~ :) ），甚至继承样式被写了!important，继承样式会被元素本身样式覆盖这一点仍然成立。
举例来说明。下面这段html：
<div> <p>acgtofe - 动漫与前端技术的综合博客</p> </div>
对应的css：
#container{color:darkblue;} .note_text{color:darkorange;}
这个部分在所有浏览器中的效果都是：
再为原来的css增加!important：
#container{color:darkblue !important;} .note_text{color:darkorange;}
然后，会发现所有浏览器中的效果都不变：
当一个元素有多个父级元素都定义了继承样式，这些继承样式之间的优先级又是怎样的？这时候，遵循的优先级原则可以叫做就近原则，也就是说，在存在多个继承样式时，层级关系距离当前元素最近的父级元素的继承样式，具有相对最高的优先级。同样，这时候也是无视样式规则内容的。
就近原则其实不算是新的结论，想一下，如果把每一个父级元素都作为当前元素，然后按照前边的“元素本身样式大于继承样式”的原则推理一遍，就可以明白，离得最近的父级元素的继承样式优先级最高，是很合理的。
css选择符权重
css选择符权重是css优先级的核心概念。但在考虑css选择符权重前，请记住，这条优先级原则涉及的样式都是指定义在元素本身的样式。