css 权重值(层叠性)实例详解
119 浏览量
2020-12-13
22:11:11
上传
评论
收藏 475KB PDF 举报
css 权重值权重值(层叠性层叠性)实例详解实例详解
•css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢? 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color:red;
font-size: 10px;
}
#wrap{
color: deeppink;
font-size: 30px;
}
.box{
color:yellow;
font-size: 50px;
}
</style>
</head>
<body>
<p class='box' id="wrap">
猜猜我是什么颜色
</p>
</body>
</html>
•执行可结果
•小结 : 出现这种效果是因为浏览器是根据权重值来判断使用哪种css样式的，权重值高的它的优先级会越高，就会呈现那种css样式,id选
择器的权重值为100>类选择器10>标签选择器1,所以最终结果为id选择器设置的样式
•示列二示列二 代码代码
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
color: cyan;
}
div {
color: yellow;
}
</style>
</head>
评论0