css选择器权重计算
程序员文章站
2022-04-27 22:31:43
...
选择器的权重是决定htm样式重要因素,选择器权重的计算是由四个数字决定的:
继承或则*贡献值 0,0,0,0 (这四个数字的权重从左到右依次减小)
标签元素 0,0,0,1
类和伪类 0,0,1,0
每个id 0,1,0,0
每个行内样式 1,0,0,0
每个!important ∞无穷大
例题一
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第1题</title>
<style type="text/css">
#father #son{
color:blue; /*对于要输出的文字来说,我们来算一下这个选择器的权重,#father 是继承过来的里面的important不能被继承,
算一个id选择器,那么这个选择器的权重为 0,1,0,0 + 0,1,0,0 = 0,2,0,0*/
}
#father p.c2{
color:black; /*权重为 0,1,1,1*/
}
div.c1 p.c2{ /*权重为 0,0,2,2*/
color:red;
}
#father{
color:green !important; /* 继承的权重为0 */
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？ <!--通过权重计算可知,这个字体的颜色为第一个选择器的颜色,为蓝色-->
</p>
</div>
</body>
</html>再看例题2
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.c1 .c2 div{ /*对于文字,来计算此标签权重,0,0,2,1*/
color: blue;
}
div #box3{ /*权重为0,1,0,1*/
color:green;
}
#box1 div{ /*权重为0,1,0,1*/
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字 <!--经过计算第二个选择器,和第三个选择的权重是相同的,由于css的层叠性
可知,后执行的代码会覆盖掉前面的代码,因此文字表现出第三个选择器的颜色-->
</div>
</div>
</div>
</body>
</html>