css层叠问题（CSS解析层叠到底是什么）
前端开发离不开CSS，相信很多同学在工作中都是“拿来主义”，遇见想要的样式直接google、copy、paste也能实现UI设计师想要的效果是不是在某个夜深人静的时候，脑海中也如流星般划过某个想法：总有一天，我要系统性地学习一下CSS（这也是我曾经的想法）在接下来的一段时间，我将持续性、系统性地对CSS相关的知识点进行归纳和总结，也希望能够帮助大家一起提升，达到“知其然，知其所以然”，下面我们就来聊聊关于css层叠问题?接下来我们就一起去了解一下吧!
css层叠问题
概述前端开发离不开CSS，相信很多同学在工作中都是“拿来主义”，遇见想要的样式直接google、copy、paste也能实现UI设计师想要的效果。是不是在某个夜深人静的时候，脑海中也如流星般划过某个想法：总有一天，我要系统性地学习一下CSS（这也是我曾经的想法）。在接下来的一段时间，我将持续性、系统性地对CSS相关的知识点进行归纳和总结，也希望能够帮助大家一起提升，达到“知其然，知其所以然”。
层叠是什么？CSS全称是Cascading Style Sheet，Cascading代表的就是层叠。
CSS本质上是声明的规则的集合，然而各种规则在声明的时候是不相关的，在应用到具体的页面元素的时候，却有可能作用于同一个元素，就像各种规则一层层的叠加到一个元素上，最后由渲染引擎去判断该使用哪个规则（样式）。如下面的例子：
页面标题有多个样式规则
在上图中，页面标题元素分别定义了三个不同字体的样式，最终应用到h1元素上的只会是一个，到底怎么解决这个冲突呢？这里就要使用到层叠的规则。
当声明冲突时，层叠会依据三种条件解决冲突：
- 样式表的来源：样式是从哪里来的，包括你写的样式和浏览器默认样式等；
- 选择器优先级：如何决定哪些选择器的优先级比别的高；
- 源码顺序：样式在样式表里的声明顺序；
用流程图表示：
层叠规则的流程图
接下来我们详细介绍这三种条件。
样式表的来源
你写的样式表（称为作者样式表）并不是浏览器唯一使用的样式表，还有用户代理样式表，即浏览器默认样式。
作者样式表和用户代理样式表
用户代理样式在不同的浏览器上表现不同，在实际的工作中使用的不多，常用样式大多会被作者样式表覆盖。上面的例子中也可以看到用户代理样式被覆盖了，说明作者样式的优先级比用户代理样式的优先级高。
选择器优先级
如果无法用样式表的来源解决冲突，接下来会判断选择器的优先级。
浏览器将优先级分为两部分：行内样式和选择器样式。一般行内样式的优先级会比选择器样式的优先级要高。但是行内样式只会作用于当前的元素，我们主要聊聊选择器样式的优先级。选择器优先级的准确规则如下：
需要注意的细节是，伪类选择器（如:hover）和属性选择器（如[type="input"])与一个类选择器的优先级相同。通用选择器（*）和组合器（>、 、～）对优先级没有影响。
我们可以使用优先级标记来准确的计算，比如“1，2，3”表示选择器由1个ID、2个类、3个标签组成。通过数值比较就能决定哪个选择器优先级更高。
源码顺序
层叠的第三步，也是最后一步，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，则该声明会覆盖之前的声明。
也就是说可以通过控制源码顺序，来添加/覆盖样式。
总结本篇我们介绍了层叠的概念以及层叠的具体规则，对于样式的优先级相信大家在工作中每天都会遇到，这篇文章有没有让你对“层叠”了解的更全面呢？欢迎大家留言与我分享。
另外，相信有些小伙伴已经注意到，我没有提及另一个优先级的关键字：important。是因为important是一种暴力提高优先级的办法，给样式声明important会让层叠的优先级失去意义，而且想覆盖一个important，只能在另一个声明中写两个important。所以，建议大家还是老老实实的使用层叠的规则来合理的声明样式。在比较特殊、例外的场景下，再去使用important。
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
