内容简介：你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含义。你可能会以为层叠指的是选择器的优先级，但这是不准确的。对于浏览器页面上某个元素的某个属性值，它可能会有多个来源（Cascading Origins）：
你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含义。
你可能会以为层叠指的是选择器的优先级，但这是不准确的。
对于浏览器页面上某个元素的某个属性值，它可能会有多个来源（Cascading Origins）：
- 用户代理 (user agent)提供的样式
- 用户自定义的样式
- 网站提供的样式
用户代理即是指浏览器， cs.chromium.org/chromium/sr… 这里是 chromium 的样式表。现在我们常常会使用 reset.css 或者 normalize.css 使的各个浏览器之间默认样式统一。
用户自定义样式虽然规范中有，但从 chrome 33 起，开始不支持用户自定义样式表，而是建议使用扩展来实现。
网站提供的样式表，则是我们所提供的 css 的样式。
来源之间是存在优先级的（和选择器的优先级是两回事），优先级高的会覆盖优先级低。我们来验证一下：
可以看到 ruby > rt { font-size: 50% } 是来自 user agent stylesheet。而 rt { font-size: 24px } 来自网站作者，如果单论选择器的权重，它是低于 ruby > rt 的。 但是它依然覆盖了 user agent stylesheet 的 font-size 属性。原因就是 css 会优先根据属性的来源判断。对于相同来源的属性，再应用权重规则。
我们也可以通过 !important 声明某个属性的重要性，再结合它的来源，于是有如下的优先级规则（忽略用户自定义的样式）：
- 用户代理
- 来源用户代理的 !important 属性
- 网站作者
- CSS 动画（Animation 和 Transition）
- 网站作者 !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:
- count the number of ID selectors in the selector (= A)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
- count the number of type selectors and pseudo-elements in the selector (= C)
- 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 选择器。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
