CSS 有两大特性：继承性和层叠性
继承性
面向对象语言都会存在继承的概念。在面向对象语言中，继承的特点：继承父类的属性和方法。
继承：给父设置一些属性，子级继承了父级的该属性，这就是css中的继承
有一些属性是可以继承下来：color，font-*，text-*，line-*. 主要是文本级的标签元素
但是像一些盒子元素属性，定位的元素(浮动，绝对定位，固定定位)不能继承
层叠性
层叠性：权重大的标签覆盖权重小的标签
权重：谁的权重大，浏览器就会显示谁的属性，当权重一样的时候，就以后来设置的属性为准
谁的权重大？ 非常简单就是计算数量
计算：id 的数量，class的数量，标签的数量，顺序不能乱
<style type="text/css"> ???/*1 ?0 ?0 */显示红色 ???#box{ ???????color: red; ????} ???/*0 ?1 ?0*/ ???.container{ ???????color: yellow; ???} ???/*0 ?0 ?1*/ ???p{ ???????color: purple; ???}</style>还有一个"就近原则"，当CSS设置的属性值是通过继承设置的，那么继承来的属性，它的权重为0。权重都为0的话，谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近
<style type="text/css"> ???#box1 #box2 .wrap3{ ???????color: red; ???} ???.wrap1 #box2{ ???????color: green; ???}</style><div id=‘box1‘ class="wrap1"> ???<div id="box2" class="wrap2"> ???????<div id="box3" class="wrap3"> ???????????<p>再来猜猜我是什么颜色？</p> ???????</div> ???</div></div>总结：
- 先看标签元素有没有被选中，如果选中了，就计算数量(id，class，标签的数量)，谁的权重大，就显示谁的属性，权重一样大，后来者居上
- 如果没有选中标签元素，权重为0，如果属性是被继承下来的，权重都是0。权重都是0："就近原则"，谁描述的近，就显示谁的属性
!important 的使用
!important：设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素，不要随便使用!important，因为使用它会影响页面的布局
CSS继承性和层叠性
原文地址：https://www.cnblogs.com/xuzewen/p/9304602.html