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