[知乎]关于选择器优先级的计算

蓝飞 蓝飞 | 时间:2013-11-25, Mon | 20,924 views
前端开发 

探寻真理者不可心存傲慢”,再一次给自己敲响警钟。

曾经以为

CSS的优先级

不过如此,虽然自己列不出(主要是不喜欢死记理论)所有CSS选择器的优先级顺序,但我在写代码的时候一定能够写对,所以一直看轻了它,直到今天遇到了这样一个问题:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Selectors Level</title>
	<style type="text/css">
	.inner:not(#outer) p{color: blue;}
	.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伪类选择器

的优先级会比

类选择器

还高?搜索了一下,发现了知乎上@一丝大大的一篇回答。

规范中已经写的很清楚:

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

计算选择器里面的class选择器,属性选择器,伪类选择器的个数(=b)

在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a、b、c三个标记来计算,
其中:

  1. ID选择器「如:#header」的个数(=a)
  2. Class选择器「如:.foo」、属性选择器「如:[class]」、伪类「如::link」的个数(=b)
  3. 标签选择器「如:h1」、伪元素「如::after」的个数(=c)
  4. 忽略「*」选择器
  5. 虽然伪类(如:hover)参与CSS优先级的计算,但是「:not」不参与计算。
  6. 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进制数字比较其大小。

练习题:

请问以下代码最终显示为什么颜色,优先级分别是多少?

CSS选择器练习题

以上内容转自知乎,感谢知乎,大赞一丝大大。

如需转载请注明出处:蓝飞技术部落格

3 条评论 »

  1. 不错,学习了!

  2. [...]2)CSS优先级是怎样判断的http://www.clanfei.com/2013/11/1731.html[...]

  3. lyhony lyhony

    不错