css层叠，CSS选择器优先级最佳解释

css层叠

​ /* 样式的来源 > 样式的是否内联 > 选择器的优先级 > 源码中声明顺序

​ 1.我们要尽量避免使用ID选择器#

​ 2.作者的！important声明 > 作者 > 用户代理

​ */

​ /* 理解优先级

1.行内样式

​ 行内样式会覆盖任何来自样式表和

​ eg：<a href = 'javascript:;' style = "background-color: orange;"></a>用style属性设置行内样式

2.选择器优先级

​ 对于ID和class选择器而言

​ -如果选择器的ID数量最多，则它胜出

​ -如果ID数量一致，则类更多的胜出

​ -两者都一样，最多标签名如p和a等的选择器胜出

​ -伪类选择器如：hover和属性选择器[type = "input"]等相当于一个类选择器的优先级

​ -通用选择器*和组合选择器> + ~对优先级无影响

注意：开发人员使用ID选择器，却不知道，它会创建更高的优先级，之后很难覆盖它。如果要覆盖一个ID选择器的样式需要使用另一个ID选择器

​ -这也是为什么在实际开发中不推荐使用ID选择器

​ -同时注意在css3中还有一种伪元素选择器 如p::first-line{}

-伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

​ */

优先级标记法

使用一个三维坐标（x,y,z）来表示选择器的优先级

x表示ID选择器数；y表示类选择器，伪类选择器，属性选择器总数；z表示标签选择器总数

其中x权重大于y，y大于z
（1，0,0）>(0,n,n)//以此为例子

当然还可以用四维表示（t,x,y,z）t取0,1 其中t表示是否为行内添加

！important

!important可以提高到最先优先级，但会带来很多麻烦，我们想覆盖这个！important只能再加一个！important

注：不推荐使用！important

//注：在创建用于分发的js模块（如npm）时，强烈建议不要在js里使用行内样式改动。如果这样做了，就是
//强迫使用该包的人，要么全盘接受包内的样式，要么在每个想要修改的属性上加上！important
//正确的做法是，在包里包含一个样式表，最好用js给元素添加或者移除类，这样使用者在不引入优先级竞赛
//的前提下，按照自己喜好选择编辑其中的样式

3.源码顺序

在优先级相同的情况下，后出现的样式会覆盖掉先出现的样式

css伪类选择器中顺序为link，visited，hover，active

层叠值

//浏览器遵循三个步骤，即来源，优先级，源码顺序，来解析网页上每一个元素的每个属性。如果一个声明在层
//叠中胜出，它就被称作一个层叠值。元素的每个属性最多只有一个层叠值。
//层叠值：作为层叠的结果，应用到一个元素上的特定属性的值