您的位置：首页 > Web前端 > CSS

CSS权重计算问题

2017-06-23 16:52 309 查看
       很多CSS的初学者觉得CSS的权重计算问题令人头疼，其实权重计算问题是有窍门的。下面这是一个很有意思的比较权重的代码，读者不妨猜猜输出的会是什么颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重计算</title>
<style type="text/css">
#box1 .he2 p {
color:red;
}
div div #box3 p{
color:yellow;
}
div.he2.he3 p {
color:blue;
}
</style>
</head>
<body>
<div class="he1" id="box1">
<div class="he2" id="box2">
<div class="he3" id="box3">
<p>权重计算，如果都选中了按优先级的高低选择，id，class，html.</p>
</div>
</div>
</div>
</body>
</html>

运行结果：权重计算，如果都选中了按优先级的高低选择，id，class，html.

原因就是输出的那句话，当有多个选择器的时候，系统会根据优先级的大小排序，比如第一个选择器就是1一个id,1个class,1个Html标签，而第二个选择器，则是1个id，0个class，3个html标签，所以第一个是大于第二个的，第三个是0个id，2个class，2个html标签，优先级自然也是最小的，就好比是111>103>023,这样就比较好理解了。

如果权重计算结果一样怎么办呢？这时候又有另外一个规则：如果权重一样，那么后出现的会覆盖掉先出现的。看下面这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重计算2</title>
<style>
#box1 #box2 p {
color: red;
}

#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>
</html>这里的运行结果会变成蓝色的。这是因为第二个是后出现的，权重要大于第一个。

这里还有一个有趣的问题，请看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#hezi2 #hezi3 {
color: green;
}
#hezi1 #hezi2 {
color: red;
}

</style>
</head>
<body>
<div class="box" id="hezi1">
<div class="box" id="hezi2">
<div class="box" id="hezi3">
<p>猜猜我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
运行结果：猜猜我是什么颜色？
为什么会是绿色呢？

权重比较第四步： 如果都没有选中，那么谁离目标元素近就听谁的

他们都没有选择到最精确的<P>标签 那么看离得最近的。

关于CSS权重问题还有很多有意思的问题，往后的学习中应该多多注意权重问题的陷阱。

8f8b
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航