<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>css权威指南_特指度</title>
<style>
body{
margin: 0;
padding: 0;
}
.sign{
color: red;
font-weight: bold;
}
h1, h2, #grape3, h4{
height: 2em; /*特指度 = 0,1,0,2 相同属性选择符在同一特指度位累加*/
}
h1{
background: red; /*特指度 = 0,0,0,1 */
}
h2{
background: silver; /*特指度 = 0,0,0,1 */
}
h1.grape{
color: white; /*特指度 = 0,0,1,1 */
}
h2.grape2{
color: yellow; /*特指度 = 0,0,1,1 */
}
#grape3{
background: green; /*特指度 = 0,1,0,0 */
}
*{
color: gray; /*通用选择符将所有元素字体颜色设置为灰色，但是根据规则
通用选择符不增加特指度即0,0,0,0*/
}
h4{
background: blue;
color: white;
}
h4 > span{
background: white; /*特指度 = 0,0,1,1 注意这里连接符不增加特指度,连零都不是*/
}
h5{
background: transparent !important; /*重要声明和非重要声明分开处理，重要声明始终胜出*/
}
</style>
</head>
<body>
<h3>
<pre>
/*
From:
CSS权威指南(第四版)_3.1_特指度
Q:
我们可以用多种方式选择设置元素的样式, 同一个元素可能被一个或多个规则选择
而且每个规则的选择符都不尽相同，因为匹配的元素只能为其中一个样式，那么如何
知道那个规则胜出？
A:
用户代理会计算每个规则中选择符的特制度，然后将其依附到规则中的声明上，如果
两个或多个属性声明有冲突，特制度最高的声明胜出
R:
一个特指度值由四部分构成，例如0,0,0,0 选择符的特指度通过下述规则确定:
1、选择符中的每个ID属性加0,1,0,0
2、选择符中的每个类属性值、属性选择或伪类加0,0,1,0
3、选择符中的每个元素和伪元素加0,0,0,1，伪类到底有没有特指度在css2中表述的有些
自相矛盾，不过css2.1明确指出，伪元素有特指度
<span class="sign">4、连接符和通用选择符不增加特指度</span>
</pre>
</h3>
/*section_1*/
<h1 class="grape">abc</h1>
/*section_2*/
<h2 class="grape2">def</h2>
/*section_3*/
<h3 id="grape3">hij</h3>
/*section_4*/
<h4 class="grape4">sss<span>XXXX</span>sss</h4> /*span元素字体颜色继承h4样式，即字体颜色为白色*/
同时我们还设置了全局字体颜色为灰色，实际显示效果也为灰色，这里体现了另一个特点:
即规则第四条： 继承不增加特指度，具体来说跟连接符一样连特指度都没有那就是连零都不是，
通用选择符的特指度为0,0,0,0，所以span内元素字体颜色为灰色，而非继承自父元素
*/
/*section_5*/
<h5 style="background: orange; height: 2em;">行内样式特指度</h5>
/*目前所见到的特指度都以零开头，因此你可能在想， 那一位为什么要存在呢？ 存在必定有用。
那一位是为行内样式声明保留的，行内样式声明的特指度比其他的声明都要高*/
</body>
</html>
浙公网安备 33010602011771号