1、继承性
<style type="text/css"> .father{ font-size: 30px; background-color: green; } .child{ color: purple; } </style> </head> <body> <!-- 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承 有一些属性是可以继承下来 : color 、 font-*、 text-*、line-* 文本元素 像一些盒子元素,定位的元素(浮动,绝对定位,固定定位)不能继承 --> <div class="father" id="egon"> <div class="child"> <p>alex</p> </div> </div> <p>小马哥</p> </body>
2、层叠性
总结:
1.先看标签元素(实际显示的内容)有没有被选中,如果选中了,就数数 (id,class,标签的数量) 谁的权重大 就显示谁的属性。权重一样大,后来者居上
2.如果没有被选中标签元素,权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" : 谁描述的近,就显示谁的属性
<style type="text/css"> /*<!-- */ /*层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了*/ /*权重: 谁的权重大,浏览器就会显示谁的属性*/ /**/ /*谁的权重大? 非常简单 数数*/ /**/ /*id的数量 class的数量 标签的数量*/ /*-->*/ #box{ color: red; } .container{ color: yellow; } p{ color: #2aabd2; } </style>
-------------------------------------------------------------------------
/*id的数量 class的数量 标签的数量*/
3、!important
<!-- !important:设置权重为无限大
!important 不影响继承来的权重,只影响选中的元素
-->
不讲道理的!import
方式来强制让样式生效,但是不推荐使用。因为大量使用!import
的代码是无法维护的。
<style type="text/css"> p{ color: red !important; font-size: 30px; } .spe1{ color: yellow ; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color: red; } .list{ color: purple !important; } </style>