03-css的继承性和层叠性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、继承性

css中所谓的继承，就是子集继承父级的属性。

可以继承的属性：color、font-xxx、text-xxx、line-xxx。（主要是文本级的标签元素）

但是，像一些盒子元素属性，定位的元素（浮动、绝对定位、固定定位）不能继承。

二、层叠性

层叠性：权重大的标签覆盖了权重小的标签。

权重：谁的权重大，浏览器就显示谁的属性

那到底权重怎么判断呢？

首先，看标签有没有被选中，如果都被选中了，比较权重（通过id class 标签的数量），谁的权重大就显示谁的属性；权重一样大，后来者居上。

其次，没有选中的标签权重为0，没法跟选中的标签相比。

如果标签都没有被选中，谁离得近就显示谁的属性，如果一样近，再比权重。

都被选中比权重

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 p{
             color: red;
         }
         #box1 .wrap2 p{
             color: yellow;
         }
         div div #box3 p{
             color: green;
         }
         div.wrap1 div.wrap2 div.wrap3 p{
             color: blue;
         }
     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

数数的时候，数的是id class 标签的数量，遵循id>class>标签

都被选中，权重相同

后来者居上。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 .wrap3 p{
             color: red;
         }
         #box1 .wrap2 p{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

选中的标签永远比没选中的标签权重大

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2 p{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

都是继承来的属性

采用就近原则，谁离预选中标签近，就显示谁的属性。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

都是继承来的属性，一样近，再比权重

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2 .wrap3{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

!important设置权重为无限大

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2 .wrap3{
             color: yellow !important;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>