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;
}