层叠样式表层叠规则你可能知道CSS代表层叠样式表（CascadingStyleSheets）。但是你不一定理解级联的含义。您可能认为级联是指选择器优先级，但这并不准确。对于浏览器页面上元素的一个属性值，它可能有多个来源（CascadingOrigins）：用户代理（useragent）提供的样式用户自定义样式网站提供的样式用户代理是指浏览Renderer，https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css这里是chromium样式表。现在我们经常使用reset.css或normalize.css来使默认样式在浏览器之间统一。虽然规范中包含了自定义样式，但是从chrome33开始，不支持自定义样式表，建议使用extensions来实现。网站提供的样式表就是我们提供的css的样式。源之间有一个优先级（不同于选择器的优先级），优先级高的会覆盖优先级低的。我们来验证一下：https://codepen.io/gygy/pen/m...可以看到ruby>rt{font-size:50%}是从useragentstylesheet里面来的。而rt{font-size:24px}来自网站作者。如果单论选择器的权重，低于ruby>rt。但它仍然会覆盖用户代理样式表的字体大小属性。原因是css会优先根据属性的来源进行判断。对于来自相同来源的属性，然后应用加权规则。我们也可以通过!important声明一个属性的重要性，结合它的来源，所以有如下优先级规则（忽略用户自定义样式）：websiteauthor!important其中，对于CSS动画，CSS只会在给定的时间从某个@keyframes获取值，而不是几个@keyframes的混合。@keyframes中定义的值会覆盖正常值，但优先级低于!important。同源CSS的权重规则。我们要确定一个元素的某个属性的值，这涉及到该元素的选择器的权重。选择器大致分为几类：元素选择器：标签名称。属性选择器（Attributeselectors）：id类的一个属性。伪类：在某种状态下匹配一个或多个元素，表现得像一个类。伪元素（Pseudo-elements）：匹配一个或多个相对确定位置的元素，表现得像一个元素。组合器：复合选择器，如div>span。多个选择器以逗号分隔。计算它们之间的权重规则：一个选择器对给定元素的特异性计算如下：统计选择器中ID选择器的个数（=A）统计选择器中类选择器、属性选择器和伪类的个数（=B)计算选择器中类型选择器和伪元素的数量(=C)忽略通用选择器如果选择器是一个选择器列表，则为列表中的每个选择器计算这个数量。对于针对列表的给定匹配过程，有效的特异性是匹配列表中最具体的选择器的特异性。简单的说，id的优先级最高，其次是类和伪类，然后是元素和伪元素。然后根据各自的数量来判断。其实说到底，不建议写过于复杂的选择器，既影响性能又维护代码。推荐采用BEM规范，编写CSS选择器。CSS值的计算过程CSS值的生成有很多步骤：收集所有应用于这个元素的声明值（Declaredvalues），可能有0个或多个，包括样式表的浏览器和作者样式表中定义的网站。根据声明值和上述级联规则，该属性的级联值（CascadedValues）只能为一个或为空。如果级联值存在，则指定值（SpecifiedValues）等于级联值。否则，将应用CSS中的属性继承规则，得到一个继承值（Inheritedvalue），级联值等于这个继承值。如果该属性不适用于继承，则指定的值将等于该属性的初始值（Initialvalue）。每个元素的每个属性都有一个且只有一个指定值。有些属性值属于相对单位，比如1em，会转换为px。在这个过程中，会将相对值做成绝对值，得到计算值（ComputedValues），可以用于继承。应用值（UsedValues）是浏览器根据计算器得到的理论布局的值，然后完成剩余的计算。比如width:auto会在这个过程中计算得到准确的像素值。实际值（ActualValues）是指浏览器根据真实情况布局使用的值。比如px是小数，会转成整数布局，因为物理上1px是不可分割的。举几个例子来说明上面的步骤：对于font-size，因为它是一个可继承的值，即使你没有给一个元素设置font-size的大小，它的层叠值为空，也会在第三步时，给指定值赋值，获取其继承值。（此继承者派生自父元素的计算值）。对于float不为none的元素，即使你手动声明display:inline，也会在第四步给display赋值block。也就是说，计算出的浮动不是none的元素的显示值是block。参考链接W3CSpecification:SelectorsMDN:CSSCascadingW3CSpecification:Cascading
