摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。
1.继承为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。
CSS 中的祖先元素会向后代传递一样东西：CSS属性的值。可以继承的属性相当一部分都个文本有关，比如颜色、字体、字号。然而，也有很多 CSS 属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距。
2.层叠注意：由于字体和文本样式是可以继承的，所以在使用相对字体单位（如百分比和 em）时要格外小心。如果某个标签的字体大小被设置为 80%，而它的一个后代的字体大小也被设置为 80%，那么该后代中文本最终的字体大小将是 64%（ 80%的 80%）。这有时候可能并不是你想要的结果。
层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。
2.1 样式来源提示：层叠是 CSS 的核心机制，理解了它才能以最经济的方式写出最容易改动的 CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们能根据需要更改文档的显示效果（比如整体调整字号）。
以下是浏览器层叠各个来源样式的顺序：
浏览器默认样式
用户样式表
作者链接样式表（按照它们链接到页面的先后顺序）
作者嵌入样式
作者行内样式
其中，用户 是指有特别需求的用户，例如视障人士，他们可以通过用户样式表，强制浏览器加载的所有网站都以更大的字号，更容易分辨的颜色显示内容。而 作者，就是网页设计师（你）。
浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。
2.2 层叠规则层叠规则一：找到应用给每个元素和属性的所有声明。
层叠规则二：按照顺序和 权重 排序。
层叠规则三：按 特指度（specific）排序。
层叠规则四：顺序决定权重。
3.特指提示：声明也可以有权重，空格!important 分号( ;)用于加重声明的权重。
例如：p {color:green !important; font-size:12pt;}
计算选择符的特指度
一个简单的记分规则，即对每个选择符都要按下面的 ICE 公式计算三个值：
I-C-E（ID-Class-Element）
说明：1.三个字母间的短横线是分隔符，并非减号；2.这并非真正的三位数，只不过大多数情况下把结果看成一个三位数没问题，三位数最大的胜出。
但是，千万得知道 0-1-12 与 0-2-0 相比，仍然是 0-2-0 的特指度更高。
针对这个公式的计分办法如下：
1.选择符中有一个ID，就在I的位置加1；
2.选择符中有一个类，就在C的位置加1；
3.选择符中有一个元素（标签）名，就在E的位置上加1；
4.得到一个三位数。
可以通过下面的例子来理解：
P{} //0-0-1 特指度=1
p.largetext{} //0-1-1 特指度=11
p#largetext{} //1-0-1 特指度=101
body p#largetext{} //1-0-2 特指度=102
body p#largetext ul.mylist{} //1-1-3 特指度=113
body p#largetext ul.mylist li{} //1-1-4 特指度=114
在此，每个选择符都比前一个选择符的特指度更高。
4.查理版简单层叠要点在这个查理版里，只要记住三条规则就够了。这三条规则适合所有情况：
规则一： 包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选
择符。
规则二： 如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会
胜出。
规则三： 设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。
下面简单解释一下规则三。
比如下面的标记：
Inheritance is weak in the Cascade
和下面的规则：
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2 （高特指度）
会导致单词 weak 变成蓝色，因为它从父元素 p 那里继承了这个颜色值。
但是，只要我们再给 em 添加一条规则 em {color:red;}
0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。
参考资料
CSS设计指南
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110963.html
摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...
摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...
摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
阅读 2938·2021-11-25 09:43
阅读 3543·2021-11-24 11:13
阅读 3339·2021-10-14 09:42
阅读 2502·2021-09-23 11:53
阅读 3581·2021-09-22 15:57
阅读 3196·2021-09-02 09:54
阅读 3477·2019-08-30 13:47
阅读 1623·2019-08-29 16:55
