所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
- 内联样式表（除了!important外最高权限）>嵌入样式表>外部样式表（通过@import加载的样式）
- 关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
权值不同时，浏览器是根据权值来判断优先级，权值的规则：
- 标签的权值为1
- 类选择符的权值为10
- ID选择符的权值最高为100
p{color:red;} /* 标签，权值为1 */
p span{color:green;} /* 两个标签，权值为1+1=2 */
p>span{color:purple;} /* 权值与上面的相同，因此采取就近原则 */
.warning{color:white;} /* 类选择符，权值为10 */
p span.warning{color:purple;} /* 权值为1+1+10=12 */
#footer .note p{color:yellow;} /* 权值为100+10+1=111 */
#footer .note p{color:yellow !important;} /* 权值最高 */继承：继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
- 由此可见：任何显示申明的规则都可以覆盖其继承样式。
- 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="priority.css">
<meta charset="UTF-8">
<title>priority</title>
</head>
<body>
<div class="weight-alike"></div>
<div class="weight-alike" style="border-color: #2e6da4"></div>
<div>
<span>1</span>
</div>
<div id="id">
<span class="span" style="color: red;">1</span>
</div>
</body>
</html>div {
width: 200px;
height: 100px;
padding: 5px;
margin: 5px 0;
border: 3px solid #999;
font-size: 24px;
font-weight: 700;
}
.weight-alike {
border-color: #3e8f3e;
}
/* 权值为110，覆盖下方 */
#id .span {
color: yellow;
}
/* 权值为101 */
#id span {
color: green;
}
/* 权值为2，覆盖下方 */
div span {
color: blue;
}
/* 权值为1 */
span {
color: red;
}