你不知道的 CSS - 层叠样式表

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

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

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

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

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

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

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

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

codepen.io/gygy/pen/mz…

可以看到 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）多个选择器之间用逗号隔开。

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

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

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