1.继承性和层叠性
1.继承性
- 可以继承上级的css属性元素，结构样式不会继承，只会继承一些文字样式
例如：容器div设置了属性，嵌套的其他标签不设置任何css属性，其结果展示却是下图的效果。这说明div的css属性作用到了其子类。
效果图
通过查看控制台，我们发现，确实是这样，如下图：
控制台展示图
2.层叠性
（1）选中时
当一个标签被多个选择器选中时，那么该如何呈现呢，这就涉及到了选择器的权重问题。
-
其中基础选择器：id>类>标签，通配符最低
例如这段代码：<p class="one" id="ppp">层叠性</p>p { color: red; } .one { color: yellow; } #ppp { color: blue; }
控制台展示图：权重比较低的选择器不起作用，被划掉了。
当有高级选择器时，需通过计算基础选择器的个数来计算权重，依次比较id，类，标签的个数。先比较id个数，取其个数多的；当id个数相同时，比较类；类也相同则比较标签。
-
权重相同时，由于代码从上到下执行，所以下边的起作用
<div class="div1" id="id1"> <div class="div2" id="id2"> <div class="div3" id="id3"> <p>我的颜色</p> </div> </div> </div>如下图计算，id选择器个数最多，所以第一个选择器起作用，为蓝色
权重计算
注意
当有交集时，所有的都要算上比如 div2.#id2，那么算是1个id+1个类
-
当有并集时，只计算要比较的标签，不相关的可以先忽略
交集：id，类，标签的值为：1，3，1 .div1 .div2#id2 .div3 p { color: yellow; } 并集：id，类，标签的值为：1，3，1 .div1 .div2#id2 .div3 p, .ppp p { color: yellow; } 等价于下边两个选择器 .div1 .div2#id2 .div3 p { color: yellow; } /*.ppp p就不参与比较了*/ .ppp p { color: yellow; }
（2）未选中时
- 没有选中到指定标签，则从上级查找，找那个离的最近的起作用。多个选择器都未选中，还是得去比较权重，还相同，则看代码执行顺序。
（3）* 关键值!important
给单一属性添加，将属性的权重提高到最大。
-
未选中时，不起作用。还是得去离的最近的上级中查找
.div1 .div2#id2 .div3 p { color: yellow !important; }
选中时： 优先级： !important > 权重>顺序
未选中时： 优先级：上级近> !important > 权重>顺序
