摘要：层叠样式表层叠规则你或许知道是层叠样式表的缩写。但你不一定真正的理解了其中层叠的含义。用户自定义样式虽然规范中有，但从起，开始不支持用户自定义样式表，而是建议使用扩展来实现。网站提供的样式表，则是我们所提供的的样式。即不为的元素的计算值为。
层叠样式表 层叠规则
你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含义。
你可能会以为层叠指的是选择器的优先级，但这是不准确的。
对于浏览器页面上某个元素的某个属性值，它可能会有多个来源（Cascading Origins）：
用户代理 (user agent)提供的样式
用户自定义的样式
网站提供的样式
用户代理即是指浏览器，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 声明某个属性的重要性，再结合它的来源，于是有如下的优先级规则（忽略用户自定义的样式）：
用户代理
来源用户代理的 !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 选择器。
CSS 的值的计算过程为了得到 CSS 的值的生成有很多个步骤：
收集应用到这个元素上面的所有的声明值（Declared values），可能有 0 个或者多个，包括浏览器的样式表和网站作者样式表中定义的。
根据声明值和上述的层叠规则得到这个属性的层叠值（Cascaded Values），层叠值只能有一个或者为空。
如果层叠值存在，则指定值（Specified Values）等于层叠值。否则，则会应用 CSS 中属性继承的规则，得到一个继承值（Inherited value），层叠值等于这个继承值。如果该属性不适用于继承，指定值会等于这个属性的初始值（Initial value）。每个元素的每个属性都有且只有一个指定值。
一些属性值是属于相对单位 如 1em 会被转化为 px，在这个过程中相对值会被绝对化，得到计算值（Computed Values），这个值可以被用于继承。
应用值（Used Values）是浏览器根据计算器，然后完成剩余的计算，得到理论上布局的值。如 width: auto 在此过程中，会被计算得出精确的像素值。
实际值（Actual Values）是指浏览器根据现实情况布局所用到值。比如 px 如果是小数，会被转化为整数布局，因为物理上 1px 不可分。
举几个例子说明一下上述步骤：
对于 font-size，由于它是可继承的值，所以即使你没为某个元素设置 font-size 大小，它的层叠值为空，它也会在第三步的时候，将指定值赋值于获取他的继承值。（这个继承者来源于父级元素的计算值）。
对于 float 不为 none 的元素，即使你手动声明了 display: inline，此时 display 在第四步的时候，会被赋值为 block。即 float 不为 none 的元素的 display 计算值为 block。
参考链接
W3C 规范：选择器
MDN: CSS 层叠
W3C 规范：层叠
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114027.html
摘要：摘自设计指南样式来源上文中提到，之所以有层叠的概念，是因为有多个样式来源。优先级相同条件下例如都来自引用样式，覆盖的默认规则是后者覆盖前者，但是有一个特殊情况，其实优先级最高。 这一节就开始实践上一节的思路！ 1.层叠的概念 简言之，层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。举一个简单的例子： showImg(https://segmentfault.com/img/b...
摘要：在的发展过程中，是最早与之父合作的人之一。问您认为中国的开发者虽然起步晚，但是现在已经赶上了是的。但是我知道，它们只是进化的一部分。第一个最主要的原因就是要保护。 非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/article/194473 Bert Bos是一位计算机科学家，他也是CSS的创始人之一。在CSS的发展过程...
摘要：知道存在是很有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。如上面所示的示例所示，元素选择器具有很低的特殊性。类选择器具有更高特殊性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。 在实际的工作中，我们可能还有些疑惑，当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元...
摘要：相反的，提供了全局作用域和局部作用域。组成界面的分子的样式可以通过元素选择器定位。元素选择器的优先级很低，因此他们不会覆盖任何基于类选择器的样式。使用元素选择器有以下优点避免了的冗长没有冗余的类。 最近学习到CSS的继承属性，正好看到这篇文章，便将它翻译出来。作者的思想，在平时的项目中或多或少都有用过，但是从来没有仔细去思考如何利用这些特性让代码更加优雅。 我热爱模块化设计。长期以来，...
摘要：一标签继承不了父元素的样式我们知道，诸如等一些属性是可以通过继承父元素得到的。那么这样就会涉及一个层叠优先级的问题。继承的属性优先级是最低的解决方法我们通过一句简单的样式就能解决这个问题 一 a标签继承不了父元素的样式？ 我们知道，诸如font-size,color等一些属性是可以通过继承父元素得到的。那么，为什么当我们想让a标签去继承父元素的颜色时，结果却常常不能如我们所愿呢？要想...
阅读 3129·2021-11-25 09:43
阅读 1890·2021-09-22 10:02
阅读 2820·2021-09-06 15:00
阅读 2062·2019-08-30 15:56
阅读 2172·2019-08-30 15:54
阅读 3079·2019-08-30 14:14
阅读 2122·2019-08-29 17:25
阅读 2788·2019-08-29 17:16
