CSS入门(2)--CSS的继承性和层叠性

最新推荐文章于 2022-12-06 08:56:51 发布

琴剑山庄

最新推荐文章于 2022-12-06 08:56:51 发布

阅读量530

点赞数 1

分类专栏： web 前端

本文链接：https://blog.csdn.net/helongzhong/article/details/53232740

版权

web 前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

如果将body设置为：

1 body{

2 color:gray;

3 font-size:14px;

}

则，body中的其他元素也会具有这些样式

2 层叠性

层叠性：就是css处理冲突的能力。所有的权重计算，没有任何兼容问题！

id的数量，类的数量，标签的数量

以id的数量为准，如id相同，依次。

如果权重一样，那么以后出现的为准：

#box1 .hezi2 p{    //1,1,1------所以为这个
           color:red;
       }
       div div #box3 p{   //1,0,3
           color:green;
       }
       div.hezi1 div.hezi2 div.hezi3 p{ //0,3,3
           color:blue;
       }

<div class="hezi1" id="box1">
       <div class="hezi2" id="box2">
           <div class="hezi3" id="box3">
               <p>猜猜我是什么颜色？</p>
           </div>
       </div>
   </div>

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

#hezi1 #hezi2 #hezi3{
           color:red;
       }
       div.box div.box div.box{
           color:blue;
       }
       p{
           color:green;
       }

<div class="box" id="hezi1">
       <div class="box" id="hezi2">
           <div class="box" id="hezi3">
               <p class="pp">猜猜我是什么颜色</p>
           </div>
       </div>
   </div>

如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

#hezi3{
           color:blue;
       }
       #hezi1 #hezi2{
           color:red;
       }

<div class="box" id="hezi1">
       <div class="box" id="hezi2">
           <div class="box" id="hezi3">    //近
               <p class="pp">猜猜我是什么颜色</p>
           </div>
       </div>
   </div>

同一个标签，携带了多个类名，有冲突：

<p class="spec1 spec2">我是什么颜色？</p>

<p class=" spec2 spec1">我是什么颜色？</p>

1 .spec2{

2 color:blue;

3 }

4 .spec1{ //红色的。因为css中red写在后面。后边的起作用

5 color:red;

6 }

</style>

权重问题大总结：

1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。