css的层叠性 | DataLearnerAI

	<style type="text/css" media="screen">
     /*css的层叠性：就是css处理冲突的能力*/
     p{
     	color: red;
     }
     .pp{
     	color: green;
     }
     #para1{
     	color: blue;
     }
/*当选择器选择上某个元素的时候 需要这么统计权重：
     id的数量，类的数量，标签的数量。*/
     /*层叠性的特点：
     ①不进位（实际上可以进位 255:1 然而一般无意义）;*/
     div div div div p{
     	color: red;
     }
     .yanse{
     	color: blue;
     } /*虽然标签选择器数量很多但是还是比不上一个类选择器*/
     /*并集选择器（分组选择器）要拆开计算 不能合着算*/
     
    /* ②如果权重一样（id，类，标签数量一样）
     谁写在后面听谁的*/
     #box1 .hezi2 p{
     	color: red;
     }
     #box2 div .pp{
     	color: blue;
     }/*应为这个写在后面所以颜色是蓝色*/

     /*如果不是直接选择到的属性 通过继承来的属性权重为0*/
     #box{
     	color: red；
     }
     .pp2{
     	color: blue；
     }/*虽然上面的id标签等级比类标签高 然而显示的颜色还是蓝色*/
     /*开始数权重之前一定要先看一看选择器最内侧标签是否选中目标*/

     /*如果属性都是继承来的 权重都是0 那么谁近听谁的*/

	</style>
</head>
<body>
     <p class="pp" id="para1">颜色</p>

     <div>
     	<div>
     		<div>
     			<div>
     				<p class="yanse">颜色</p>
     			</div>
     		</div>
     	</div>
     </div>

     <div class="hezi1" id="box1">
     	<div class="hezi2" id="box2">
     		<div class="hezi3" id="box3">
     			<p class="pp">颜色</p>
     		</div>
     	</div>
     </div>

     <div id="box">
     	<p class="pp2">颜色</p>
     </div>
</body>
  css权重总结：
  ① 先看有没有选中 如果选中了 那么以（id数，类数，标签数）来计权重 谁大听谁
  ② 如果没有选中，那么权重是0 此时只以就近原则选择属性
  所有权重问题 没有兼容性问题

DataLearner 官方微信