影响css样式优先级的因素有如下几个：
- 资源顺序
- 优先级
- 内联样式和!important
资源顺序(层叠)
简单的说，当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
<style>
h1 {
color: red;
}
h1 {
color: blue;
}
</style>
<h1>This is my heading.</h1>
优先级
通常优先级从低到高为：类型选择器、伪元素 < 类选择器、属性选择器、伪类 < id选择器。
一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：
- ID：选择器中包含 ID 选择器则百位得一分。
- 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
- 元素：选择器中包含元素、伪元素选择器则个位得一分。
我们来看最普通的一种情况
<style>
/* 优先级：1-0-0 */
p#title { color: yellow }
/* 优先级：0-1-0 */
p.title { color: blue }
/* 优先级：0-0-1 */
p { color: red }
</style>
<body>
<!-- red -->
<p>title</p>
<!-- blue -->
<p class="title">title</p>
<!-- yellow -->
<p class="title" id="title">title</p>
</body>
而当选择器越具体，优先级越高
<style>
/* 优先级：0-2-0 */
.parent .child {
color: red
}
/* 优先级：0-1-0 */
.child {
color: blue
}
</style>
<body>
<div class="parent">
<!-- red -->
<div class="child">text</div>
</div>
</body>
但这里有个需要注意的点
<style>
/* 优先级：0-3-0 */
.child[title].active {
color: green
}
/* 优先级：0-2-1 */
div.child.active {
color: purple
}
/* 优先级：0-2-0 */
.child[title] {
color: yellow
}
/* 优先级：0-2-0 */
.child.active {
color: blue
}
/* 优先级：0-2-0 */
.parent .child {
color: red
}
/* 优先级：0-2-0 */
.child:first-child {
color: pink;
}
/* 优先级：0-2-0 */
.sibling + .child {
color: black
}
</style>
<body>
<div class="parent">
<!-- green -->
<div class="sibling" >sibling</div>
<div class="child active" title="text" >text</div>
</div>
</body>
上面权重最高的是1，其次是2，3~7的选择器的权重是相同的，所以根据层叠的规则，在没有1，2的情况下，生效的会是最后一个。
选择器的优先级跟dom的层级没有关系，不是越接近选择器结构的优先级越高
<style>
/* 优先级：0-3-0 */
.level1 .level2 .level5 {
color: blue;
}
/* 优先级：0-2-0 */
.level4 .level5 {
color: red;
}
</style>
<body>
<div class="level1">
<div class="level2">
<div class="level3">
<div class="level4">
<!-- blue -->
<div class="level5">text</div>
</div>
</div>
</div>
</div>
</body>
在上面的优先级计算规则中，有两个例外:is和:not
还有一种情况的需要注意的，[id="foo"]虽然是选择了id属性，但是它还是作为一个属性选择器来计算自身的优先级。
另外，为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则。
<style>
#parent {
color: green;
}
h1 {
color: purple;
}
</style>
<body>
<html>
<body id="parent">
<!-- purple -->
<h1>Here is a title!</h1>
</body>
</html>
</body>
内联样式
优先于所有普通的样式，可以理解为1-0-0-0
例外规则 !important
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
*. 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
*. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
*. 永远不要在你的插件中使用 !important
*. 永远不要在全站范围的 CSS 代码中使用 !important
*. 与其使用 !important，你可以：
- 更好地利用 CSS 级联属性
- 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
<div id="test">
<span>Text</span>
</div>
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）
- 对于（2）的一种特殊情况，当您无其他要指定的内容时，请复制简单的选择器以增加特异性。
#myId#myId span { color: yellow; }
.myClass.myClass span { color: orange; }
