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>
选择器的优先级
