第3章结构和层叠 => 特殊性(优先级) P69-CSDN博客

本文链接：https://blog.csdn.net/conkeyn/article/details/83392891

对于每个CSS规则，用户代理（浏览器）会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明，那么有最高的特殊性的声明就胜出。

选择吕的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0。一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加0,1,0,0。
对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0。
对于选择器中给定的各个元素和伪元素，加0,0,0,1。伪元素是否有特殊性？在这方面CSS2有些自相矛盾，不过CSS2.1很清楚地指，伪元素有特殊性，而且特殊性值为0,0,0,1。
结合符和通配选择器对特殊性没有任贡献。

列如，以下规则中选择器的特殊性见注释：

h1 {color:red;} /* 0,0,0,1 */ ==>h1为第3点

p em {color:purple;} /* 0,0,0,2 */ ==>p为第3点， em为第3点

.grape {color:purple;} /* 0,0,1,0 */ ==>.grape为第2点

*.bright {color:yellow;} /* 0,0,1,0 */ ==>*为第4点，.bright为第2点

p.bright {color:red;} /* 0,0,1,1 */ ==>p为第3点，.bright为第2点，

p.bright em.dark{color:red;} /* 0,0,2,2 */ ==>p为第3点，.bright为第2点 em为第3点，.dark为第2点

#id216{color:red;} /* 0,1,0,0 */ ==>#id216为第1点

div#sidebar *[href] {color:red;} /* 0,1,1,1 */ ==>div为第3点，#sidebar为第1点，*为第4点，[href]为第2点。

html > body table tr[id="totals"] td ul > il {color:maroon;} /* 0,0,1,7 */ ==>htm:0,0,0,1; body:0,0,0,1; table:0,0,0,1 tr:0,0,0,1; id="totals":0,0,1,0 td:0,0,0,1 ul:0,0,0,1 ; il:0,0,0,1;

上述各种情况下，那些规则之所以胜出是国为其特殊性更高。之所以会这样，是因为值是从左向右排序的。特殊性值1,0,0,0大于以0开头的所有特殊性值，而不论后面的数是什么。所以0,1,0,1比0,0,1,7高，国为前一个值中第二位上的1大于第二个值中第二位上的0。

1、声明和特殊性：

一量确定一个选择器的特殊性，这个值将授予其所有相关声明。考虑以下规则：

h1,h2.section {color:silver;background:black;}

由于特殊性的缘故，用户代理（浏览器）必须相应地处理这个规则，将其“解组”为单独的规则。因此，前以的例子将变成：

h1 {color:silver;} /* 0,0,0,1 */

h1 {background:black;} /* 0,0,0,1 */

h2.section {color:silver;} /* 0,0,1,1 */

h2.section {background:black;} /* 0,0,1,1 */

如果多个规则与同一个元素匹配，而且有些声明相毒冲突，在这种情况下特殊性就很重要。例如，以下CSS程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>声明和特殊性</title>
<style type="text/css">
/* 0,0,0,2 */
h1 + p{
	color:red;
	font-style:italic;
}
/* 0,0,0,1 */
p{
	color:gray;
	background:white;
	font-style:normal;
}
/* 0,0,1,0 */
*.aside{
	color:black;
	background:silver;
}
</style>
</head>

<body>
<h1>Greetings!</h1>
<p class="aside">It's a fine way to start a day,don't you think?</p>
<p >There are many ways to greet a person,but the words are not as important as the act of greeting itself.</p>
<h1>Salutations!</h1>
<p >There is nothing finer than a hearty welcome from one's fellow man.</p>
<p class="aside">Although a thick and juicy hamburger with bacon and mushrooms runs a close second.</p>
</body>
</html>