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

杰拉斯 | 时间：2013-11-25, Mon | 24,447 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三个标记来计算，
其中：

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进制数字比较其大小。

练习题：

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

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

如需转载请注明出处：杰拉斯的博客

杰拉斯的博客

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

相关文章

3 条评论 »