这样一个问题：
- <!doctype html>
- <htmllang="en">
- <head>
- <metacharset="UTF-8">
- <title>CSS Selectors Level</title>
- <styletype="text/css">
- .inner:not(#outer) p{color: blue;}
- .outer .inner p{color: orange;}
- </style>
- </head>
- <body>
- <divclass="outer">
- <p>outer</p>
- <divclass="inner">
- <p>inner</p>
- </div>
- </div>
- </body>
- </html>
猜猜是什么颜色？
蓝色。
为什么呢？为啥:not伪类选择器的优先级会比类选择器还高？搜索了一下，发现了知乎上@一丝大大的一篇回答。
规范中已经写的很清楚：
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
计算选择器里面的class选择器，属性选择器，伪类选择器的个数(=b)
在 Selectors Level 3 规范中，一个选择器的优先级（权重）由依次串联的a、b、c三个标记来计算，
其中：
- ID选择器「如：#header」的个数（=a）
- Class选择器「如：.foo」、属性选择器「如：[class]」、伪类「如：:link」的个数（=b）
- 标签选择器「如：h1」、伪元素「如：:after」的个数(=c)
- 忽略「*」选择器
- 虽然伪类(如:hover)参与CSS优先级的计算，但是「:not」不参与计算。
- HTML style 属性内的优先级在CSS2.1中有描述（实际在浏览器的实现中它不直接参与优先级的计算）
Assigning property values, Cascading, and Inheritance
只要一个选择器的 a>0，b=0，即使另外一个选择的a=0, b=161，那么前者的权重依然更大。
例1：
- a:link{
- color: red;/* 优先级:a=0,b=1,c=1 */
- }
- .test{
- color: yellow;/* 优先级:a=0,b=1,c=0 */
- }
他们的权重（优先级）b是相等的，但是c标记中，前者大于后者，所以最终「a:link」生效显示为红色。
例2：
- div[class].main a{
- color:red;/* 优先级:a=0,b=2,c=2 */
- }
- body div a[href]{
- color:blue;/* 优先级:a=0,b=1,c=3 */
- }
由于属性选择器和class选择器都计算在b标记中，所以前者b=2>后者b=1，最终显示为红色。
切记，不要把权重简单的作为10进制数字比较其大小。
转载自：蓝飞技术部落格