继承性和层叠性

Posted clcl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了继承性和层叠性相关的知识，希望对你有一定的参考价值。

在前面的博客中已经列出了1.引入方式；2.基本选择器；3.高级选择器；4.属性选择器；5.伪类选择器。

接下来我要把剩下的css知识点全写完！！！

7．Css的继承性和层叠性

Css有两大特性：继承性和层叠性

继承性

对父级设置的一些属性，子级继承了父级的属性；比如说设置了div的一些属性，没有设置p标签，p标签也具备父级的一些属性

可以继承的属性：color font-* text-* line-* ,主要是文本机的标签元素。

像一些合资元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         p{  
  8.             color: blue;  
  9.             background: transparent;  
  10.         }  
  11.         div{  
  12.             color: red;  
  13.             font-size: 40px;  
  14.             background: green;  
  15.             width: 300px;  
  16.         }  
  17.     
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     
  22.     <!-- 有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。  
  23.     
  24. 但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。 -->  
  25.     
  26.      
  27.     <div>  
  28.             
  29.         <p>胡鹏</p>  
  30.     </div>  
  31.         
  32. </body>  
  33. </html>  

显示效果

技术分享图片

 

层叠性

层叠性就是谁权重大，就显示谁的属性

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style>  
  7.     /*1 0 0*/  
  8.         #box{  
  9.             color: green;  
  10.         }  
  11.         /*0 1 0*/  
  12.         .container{  
  13.             color: yellow;  
  14.         }  
  15.         /*0 0 1*/  
  16.         p{  
  17.             color: red;  
  18.         }  
  19.     </style>  
  20. </head>  
  21. <body>  
  22.     <p id="box" class="container">  
  23.         赵云是什么颜色  
  24.     </p>  
  25. </body>  
  26. </html>  

结果显示

技术分享图片

如果权重一样的话那就以后设置的属性为主

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

 

技术分享图片

 

总结：

1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性

 



以上是关于继承性和层叠性的主要内容，如果未能解决你的问题，请参考以下文章

详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记

详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记

while循环语句

css的继承和层叠

层叠和继承的概念，选择器的优先级，盒模型，元素在页面上的定位体系，常规流

012 三大特性