一、继承性

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

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

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

二、层叠性

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

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

那到底权重怎么判断呢？

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

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

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

都被选中比权重

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box1 #box2 p{
 8             color: red;
 9         }
10         #box1 .wrap2 p{
11             color: yellow;
12         }
13         div div #box3 p{
14             color: green;
15         }
16         div.wrap1 div.wrap2 div.wrap3 p{
17             color: blue;
18         }
19     </style>
20 
21 </head>
22 <body>
23 
24 <div id='box1' class="wrap1">
25     <div id="box2" class="wrap2">
26         <div id="box3" class="wrap3">
27             <p>猜猜我是什么颜色</p>
28         </div>
29     </div>
30 </div>
31     
32 </body>
33 </html>

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

都被选中，权重相同

后来者居上。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box1 .wrap3 p{
 8             color: red;
 9         }
10         #box1 .wrap2 p{
11             color: yellow;
12         }
13 
14     </style>
15 
16 </head>
17 <body>
18 
19 <div id='box1' class="wrap1">
20     <div id="box2" class="wrap2">
21         <div id="box3" class="wrap3">
22             <p>猜猜我是什么颜色</p>
23         </div>
24     </div>
25 </div>
26     
27 </body>
28 </html>

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box1 #box2 .wrap3{
 8             color: red;
 9         }
10         #box1 .wrap2 p{
11             color: yellow;
12         }
13 
14     </style>
15 
16 </head>
17 <body>
18 
19 <div id='box1' class="wrap1">
20     <div id="box2" class="wrap2">
21         <div id="box3" class="wrap3">
22             <p>猜猜我是什么颜色</p>
23         </div>
24     </div>
25 </div>
26     
27 </body>
28 </html>

都是继承来的属性

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box1 #box2 .wrap3{
 8             color: red;
 9         }
10         #box1 .wrap2{
11             color: yellow;
12         }
13 
14     </style>
15 
16 </head>
17 <body>
18 
19 <div id='box1' class="wrap1">
20     <div id="box2" class="wrap2">
21         <div id="box3" class="wrap3">
22             <p>猜猜我是什么颜色</p>
23         </div>
24     </div>
25 </div>
26     
27 </body>
28 </html>

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box1 #box2 .wrap3{
 8             color: red;
 9         }
10         #box1 .wrap2 .wrap3{
11             color: yellow;
12         }
13 
14     </style>
15 
16 </head>
17 <body>
18 
19 <div id='box1' class="wrap1">
20     <div id="box2" class="wrap2">
21         <div id="box3" class="wrap3">
22             <p>猜猜我是什么颜色</p>
23         </div>
24     </div>
25 </div>
26     
27 </body>
28 </html>

!important设置权重为无限大

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box1 #box2 .wrap3{
 8             color: red;
 9         }
10         #box1 .wrap2 .wrap3{
11             color: yellow !important;
12         }
13 
14     </style>
15 
16 </head>
17 <body>
18 
19 <div id='box1' class="wrap1">
20     <div id="box2" class="wrap2">
21         <div id="box3" class="wrap3">
22             <p>猜猜我是什么颜色</p>
23         </div>
24     </div>
25 </div>
26     
27 </body>
28 </html>

作者：流浪者

日期：2019-08-31

03-css的继承性和层叠性