这是我参加「第五届青训营 」伴学笔记创作活动的第 2 天
介绍
CSS 中的层叠、优先级和承继决议着怎么将 CSS 运用到 HTML 中，以及怎么解决抵触。在某些时分，咱们在做一个项目进程中会发现一些应该产收效果的款式没有收效，一般的原因是你创建了两个运用于同一个元素的规矩，而设计元素款式的规矩或许不是希望的规矩，因而需求了解这些机制是怎么工作的。
层叠
是 CSS 的一个基本特征，它是一个界说了怎么兼并来自多个源的特点值的算法。简单地说，便是 CSS 规矩的次序。它在 CSS 处于核心地位，CSS 的全称层叠款式表正是强调了这一点。有三个因素需求考虑，依据重要性排序（递加）如下：
- 资源次序 – 假如你有超越一条规矩，并且都是相同的权重，那么最终面的规矩会运用。
- 优先级 – 决议在发生抵触的时分应该运用哪条规矩。例如有些规矩在最终呈现，可是却运用了前面的具有抵触的规矩，这是由于前面的有更高的优先级——它规模更小。
- 重要程度 – 特殊的 CSS 规矩 !important，用于修正特定特点的值，能够掩盖一般规矩的层叠。
大多数 @规矩的 CSS 声明是参加层叠核算的，比方包含于 @media、@documents 或者@supports 的 CSS 声明，可是包含于 @keyframes 和 @font-face 的声明不参加核算，由于它们是作为一个全体参加层叠算法的筛选。别的，@import 和 @charset 遵循特定的算法，不受层叠算法影响。
还能够运用 CSS @规矩 中的 @layer 声明一个级联层，同一层内的规矩将级联在一起，优先级的次序由声明层的次序来决议，这给予了开发者对层叠机制的更多操控。
优先级
优先级是基于不同品种选择器组成的匹配规矩。浏览器是依据优先级来决议当多个规矩有不同选择器对应相同的元素的时分需求运用哪个规矩。
- 假如一个元素选择器不是很详细，例如选择页面上该类型的一切元素（或伪元素），则它的优先级就会低一些。
- 假如一个类选择器稍微详细点，例如选择该页面中有特定 class 特点值（或其他特点选择器）的元素，则它的优先级就要高一点。
- 假如一个类选择器更详细点，例如选择该页面中有特定 id 特点值的元素，则它的优先级就要更高一点。
- 给元素增加的内联款式 (例如，style=”font-weight:bold”) 总会掩盖外部款式表的任何款式，因而可看作是具有最高的优先级。
- 当在一个款式声明中运用一个 !important 规矩时，将掩盖任何其他声明，与优先级无关。
下表列出了款式来历和其对应地重要程度（递加），例如 CSS 动画用 @keyframes @规矩界说的值会掩盖全部一般值，但会被 !important 的值掩盖。
| 重要程度 | 来历 |
|---|---|
| 1 | 用户署理 |
| 2 | 用户 |
| 3 | 页面作者 |
| 4 | CSS 动画 |
| 5 | 页面作者（!important） |
| 6 | 用户（!important） |
| 7 | 用户署理（!important） |
| 8 | css 过渡 (css transitions) |
- 浏览器会有一个基本的款式表来给任何网页设置默许款式，称为用户署理款式。
- 网页的作者能够界说文档的款式，这是最常见的款式表。大多数情况下此类型款式表会界说多个，它们构成网站的视觉和体会，即主题。
- 读者，作为浏览器的用户，能够运用自界说款式表定制运用体会。
- 留意的是，原本级联水平高的声明运用了 !important 后，其优先级反而低，而原本级联水平低的声明运用了 !important 后，优先级反而高。
承继
每个CSS 特点界说的概述都指出了这个特点是默许承继的 (“Inherited: Yes”) 还是默许不承继的 (“Inherited: no”)。这决议了当你没有为元素的特点指定值时该怎么核算值。
例如，你设置一个元素的 color 和 font-family，每个在里面的元素也都会有相同的特点，除非你直接在元素上设置特点。可是假如你在一个元素上设置 width 为 50% ，一切的后代元素则不会是父元素的宽度的 50% 。
虽然每个 CSS 特点页都列出了特点是否被承继，但咱们一般能够通过知识来判别哪些特点属于默许承继。
- inherit 关键字答应显式的声明承继性，它对承继和非承继特点都收效。
- 能够运用 all 简写特点一次操控一切特点的承继，该特点将其值运用于一切特点。
- 常见可承继特点有：字体系列特点、文本系列特点（color、text-align、letter-spacing 等）。
- 常见不行承继特点有：布景系列特点、盒子模型特点（display、max-width、width、height、margin 、outline、border、padding 等）、定位特点（float、clear、position、top、overflow、clip、z-index 等）。
总结
CSS 声明的优先级取决于界说它的款式表和级联层。
- 能够设置自界说款式表来掩盖开发人员界说的款式：例如用户或许视力受损，并想在一切网页上设置两倍的正常字体大小，以便更容易进行阅读。
- 能够运用新特性级联层：你能够让非分层款式（在任何层之外声明的 CSS 款式会被按声明的次序组合在一起，形成一个未命名的层，它会被当作最终声明的层）掩盖分层款式，或者你能够让后面的层中声明的款式掩盖先前的层中声明的款式。例如，作为开发人员，你或许无法编辑第三方的款式表，但你能够将外部的款式表导入级联层中，以便你自己的款式能够轻松地掩盖导入的款式，无需忧虑第三方选择器的优先级。
