CSS的选择器优先级的权重
在 Selectors Level 3 规范中，一个选择器的优先级（权重）由依次串联的a、b、c三个标记来计算
-
a: ID选择器 如#header
-
b: class选择器如.header 属性选择器如[title] 伪类如:link
-
c: 标签选择器如h1 伪元素选择器如::after
注意：伪类:not不参与优先级的计算
一些例子
只要一个选择器的 a>0，b=0，即使另外一个选择的a=0, b=161，那么前者的权重依然更大。
a:link{
color: red; /* 优先级:a=0,b=1,c=1 */
}
.test{
color: yellow; /* 优先级:a=0,b=1,c=0 */
}
他们的权重（优先级）b是相等的，但是c标记中，前者大于后者，所以最终「a:link」生效显示为红色。
:not() 不参与优先级的计算 但()里面的选择器要计算在内
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Level</title>
<style type="text/css">
.inner:not(.outer) p {
color: red;
}
.outer .inner p {
color: orange;
}
</style>
</head>
<body>
<div class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
</div>
</div>
</body>
</html>
这个inner会显示orange 因为两个优先级相同，下面的会覆盖上面的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Level</title>
<style type="text/css">
.inner:not(#outer) p {
color: red;
}
.outer .inner p {
color: orange;
}
</style>
</head>
<body>
<div class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
</div>
</div>
</body>
</html>
而这个例子会显示蓝色，上面的:not()内的id选择器也要计算在内
参考链接：
1.知乎的讨论：http://www.zhihu.com/question/21777264
2.某博客：http://www.clanfei.com/2013/11/1731.html