层叠样式表

层叠规则

你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含义。

你可能会以为层叠指的是选择器的优先级，但这是不准确的。

对于浏览器页面上某个元素的某个属性值，它可能会有多个来源（Cascading Origins）：

1. 用户代理 (user agent)提供的样式
2. 用户自定义的样式
3. 网站提供的样式

用户代理即是指浏览器，https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css 这里是 chromium 的样式表。现在我们常常会使用 reset.css 或者 normalize.css 使的各个浏览器之间默认样式统一。

用户自定义样式虽然规范中有，但从 chrome 33 起，开始不支持用户自定义样式表，而是建议使用扩展来实现。

网站提供的样式表，则是我们所提供的 css 的样式。

来源之间是存在优先级的（和选择器的优先级是两回事），优先级高的会覆盖优先级低。我们来验证一下：

https://codepen.io/gygy/pen/m...

可以看到 ruby > rt { font-size: 50% } 是来自 user agent stylesheet。而 rt { font-size: 24px } 来自网站作者，如果单论选择器的权重，它是低于 ruby > rt 的。
但是它依然覆盖了 user agent stylesheet 的 font-size 属性。原因就是 css 会优先根据属性的来源判断。对于相同来源的属性，再应用权重规则。

我们也可以通过 !important 声明某个属性的重要性，再结合它的来源，于是有如下的优先级规则（忽略用户自定义的样式）：

1. 用户代理
2. 来源用户代理的 !important 属性
3. 网站作者
4. CSS 动画（Animation 和 Transition）
5. 网站作者 !important

其中对于 CSS 动画，在给定时间中 CSS 只会从某一个 @keyframes 中获取值，而不是某几个 @keyframe 的混合。@keyframes 里定义的值会覆盖普通值，但是优先级低于 !important。

权重规则

对于同一来源的 CSS。我们要确定某个元素的某个属性的值，涉及到该元素的选择器的权重问题。选择器大致分为几类：

• 元素选择器（Elemental selectors）：标签名称。
• 属性选择器（Attribute selectors）：id class 某个属性。
• 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，表现的像一个 class。
• 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，表现的像一个 element。
• 组合选择器（Combinators）：div > span 之类的复合选择器。
• 多重选择器（Multiple selectors）多个选择器之间用逗号隔开。

它们之间的权重规则计算：

A selector’s specificity is calculated for a given element as follows:

1. count the number of ID selectors in the selector (= A)
2. count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
3. count the number of type selectors and pseudo-elements in the selector (= C)
4. ignore the universal selector

If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.

简单的说来 id 优先级最高，其次是类和伪类再次是元素和伪元素。然后根据它们各自的数量判断。

其实说到底不建议写过于复杂的选择器，会影响性能和维护代码。建议采用 BEM 规范，书写 CSS 选择器。

CSS 的值的计算过程

为了得到 CSS 的值的生成有很多个步骤：

1. 收集应用到这个元素上面的所有的声明值（Declared values），可能有 0 个或者多个，包括浏览器的样式表和网站作者样式表中定义的。
2. 根据声明值和上述的层叠规则得到这个属性的层叠值（Cascaded Values），层叠值只能有一个或者为空。
3. 如果层叠值存在，则指定值（Specified Values）等于层叠值。否则，则会应用 CSS 中属性继承的规则，得到一个继承值（Inherited value），层叠值等于这个继承值。如果该属性不适用于继承，指定值会等于这个属性的初始值（Initial value）。每个元素的每个属性都有且只有一个指定值。
4. 一些属性值是属于相对单位 如 1em 会被转化为 px，在这个过程中相对值会被绝对化，得到计算值（Computed Values），这个值可以被用于继承。
5. 应用值（Used Values）是浏览器根据计算器，然后完成剩余的计算，得到理论上布局的值。如 width: auto 在此过程中，会被计算得出精确的像素值。
6. 实际值（Actual Values）是指浏览器根据现实情况布局所用到值。比如 px 如果是小数，会被转化为整数布局，因为物理上 1px 不可分。

举几个例子说明一下上述步骤：

• 对于 font-size，由于它是可继承的值，所以即使你没为某个元素设置 font-size 大小，它的层叠值为空，它也会在第三步的时候，将指定值赋值于获取他的继承值。（这个继承者来源于父级元素的计算值）。
• 对于 float 不为 none 的元素，即使你手动声明了 display: inline，此时 display 在第四步的时候，会被赋值为 block。即 float 不为 none 的元素的 display 计算值为 block。

参考链接

• W3C 规范：选择器
• MDN: CSS 层叠
• W3C 规范：层叠