css的层叠性

    <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 此时只以就近原则选择属性
  所有权重问题 没有兼容性问题
相关博客

最热博客
