[快速入门前端 19] CSS 三大特性：层叠性、继承性、优先级

层叠性

当元素的样式发生冲突时，浏览器会根据规则(权重)进行样式层叠(覆盖)。

样式冲突是指某元素特同个样式名被设为不同值，例如一个元素同时拥有 color: red; 和 color: green;样式冲突时才会发生层叠层叠时会先判断权重，权重相同则採「后覆盖前」的原则

继承性

继承性是指元素会自动拥有其父元素或祖先元素的某些样式，这个特性可以渐少 CSS 程式码的冗余，避免每写一个新的元素就要重写所有样式的情况。

不是所有样式都可以被继承，通常可以被继承的有 text 系列、font 系列、color 系列 属性若祖先元素的样式不同，则优先继承最靠近的祖先元素若想确认某样式是否会继承可参考 MDN inherited

範例：
设定 div 文字为红色，则里面所有后代元素文字预设都为红色。

div {    color: red;}

<div>    我是 div 的文字    <label>我是 div 里面的 label 的文字</label>    <p>我是 div 里面的 p 的文字 <span>我是 div 里面的 p 里面的 span 的文字</span> </p></div>

範例：
div 和 p 的样式冲突，所以 span 优先继承 p 的样式。

div {    color: red;}p {    color: blue;}

<div>    我是 div 的文字    <label>我是 div 里面的 label 的文字</label>    <p>我是 div 里面的 p 的文字 <span>我是 div 里面的 p 里面的 span 的文字</span> </p></div>

优先级

优先级其实就是我们之前说过的 CSS 选择器权重，不过在这边我们要加入继承的概念。基本上继承而来的样式是最弱的，比通配符还弱，所以完整的优先级为：

!important > 行内样式 (inline) > ID 选择器 > Class 类别选择器 > 元素选择器 > 通配符选择器 > 继承而来的样式

---

上一篇：[快速入门前端 18] CSS 选择器的权重
下一篇：[快速入门前端 20] CSS：长度单位与颜色
系列文章列表：[快速入门前端] 系列文章索引列表