<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性权重</title>
<style type="text/css">
/*!*1 1 1*!*/
/*#box2 .wrap3 p {*/
/*color: yellow;*/
/*}*/
/*!*1 1 1*!*/
/*#box1 .wrap2 p {*/
/*color: red;*/
/*}*/
/*-------------------------------------------*/
/*继承来的*/
/*其实就是 0*/
#box1 #box2 .wrap3{
color: red;
}
/*选中来的*/
/*1 1 1*/
.wrap1 #box2 .wrap3{
color: green;
}
</style>
</head>
<body>
<!--
当权重一样的时候,后设置的属性为准。前提是权重一样,后来者居上
继承来的属性 权重为0
总结:先看标签元素有没有被选中,如果选中了就数数(id、class、标签)
比较权重,谁的权重大就显示谁的属性
如果没有被选中标签元素,权重为0。
如果属性都是被继承下来的。权重都为0.
权重都是0:'就近原则':谁描述的近,就选择谁的属性,都描述的一样近就比较权重
-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>