css权重计算与比较
计算权重第一步
比较 id class html 选择器的数量
代码：
<style>
/*计算权重第一步：比较id class html选择器的数量*/
1. #box1 .hezi2 p {
color: red;
}
2. div div #box3 p {
color: green;
}
3. div.hezi1 div.hezi2 div.hezi3 p {
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>你猜猜我是什么颜色?</p>
</div>
</div>
</div>
</body>
这里的权重比较为：
id class html
1. 1 1 1
2. 1 0 3
3. 0 3 4
所以这里显示的是红色（权重比较 id>class>html）。
计算权重第二步
如果权重一样，那么后出现的会覆盖掉先出现的。
代码：
<style>
/*计算权重的第二步: 如果权重一样，那么后出现的会覆盖掉先出现的。*/
1. #box1 #box2 p {
color: red;
}
2. #box2 #box3 p {
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>你猜猜我是什么颜色?</p>
</div>
</div>
</div>
</body>
这里的权重比较为：
id class html
1. 2 0 1
2. 2 0 1
所以这里应该是显示蓝色。
计算权重第三步
看一下选择器是否直接选中目标元素，如果没有直接选中目标元素，那么他们的权重为0。
代码：
/*比较权重第三步: 看一下选择器是否直接选中目标元素，如果没有直接选中目标元素，那么他们的权重为0*/
#hezi1 #hezi2 #hezi3 {
color: red;
}
div.box div.box div.box {
color: green;
}
p {
color: blue;
}
这里前两个选择器都是没有选中目标元素只有第三个选中p元素，所以这里显示的是蓝色。
权重计算第四步
如果都没有选中，那么谁离目标元素近就听谁的。
代码（body内容同上）：
/*权重比较第四步： 如果都没有选中，那么谁离目标元素近就听谁的*/
#hezi2 #hezi3 {
color: green;
}
#hezi1 #hezi2 {
color: red;
}
heizi3离显示的p元素最近，所以这里显示的是绿色。
4700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
