码迷，mamicode.com
首页 > 其他好文 > 详细

继承性和层叠性

时间：2018-05-24 20:38:51      阅读：196      评论：0      收藏：0      [点我收藏+]

标签：html   gre   white   颜色   wrap   head   round   nbsp   meta   

在前面的博客中已经列出了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:"就近原则" ： 谁描述的近，就显示谁的属性

 

继承性和层叠性

标签：html   gre   white   颜色   wrap   head   round   nbsp   meta   

原文地址：https://www.cnblogs.com/clcl/p/9084812.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！