在前端面试中，经常会遇到CSS选择器的问题三连：
说一下CSS的选择器有哪些优先级是怎样的权重计算方式我们在上一篇CSS篇-常用选择器介绍中已经对问题1进行了详细的解答，今天就来给大家介绍选择器的优先级和权重计算方式。里面关于一些权重比较误区的介绍，大家千万不要错过。
优先级是什么？有什么用？先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？
其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
换种说法，优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
总结一下：
权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果两个选择器同时作用到一个元素上，权重高者生效。权重的计算规则接着介绍权重的计算规则：
第一优先级：!important会覆盖页面内任何位置的元素样式内联样式，如style="color:green"，权值为ID选择器，如#app，权值为类、伪类、属性选择器，如.foo,:first-child,div[class="foo"]，权值为标签、伪元素选择器，如div::first-line，权值为通配符、子类选择器、兄弟选择器，如*,,+，权值为继承的样式没有权值权值计算公式：
权值=第一等级选择器x个数，第二等级选择器x个数，第三等级选择器x个数，第四等级选择器x个数
比如：
选择器千位百位十位个位优先级h1h1+p::first-letterlia[href*="en-US"].inline-warning#identifier内联样式权重的比较规则当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值1,0,0,0对应--第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的个数+个数+10个数+1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。
下面通过几个例子进行比较规则的说明。
示例一假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效
body#goddiv.dadspan.son{width:px;}body#godspan#test{width:px;}
比较规则说明：
先比较高权重位，即第一个样式的高权重为#god=第二个样式的高权重为#god+#text=20所以最终计算结果是取width:px;若两个样式的高权重数量一样的话，则需要比较下一较高权重！示例二styletype="text/css"#parentp{background-color:red;}div.a.b.c.d.e.f.g.h.i.j.kp{background-color:green;/style......divid="parent"divclass="abcdefghijk"pxxxx/p/div/div
如果按照相加的错误方法，如果按照相加的规则的话，上述例子会为：
qz1=+1=qz2=1+10*11+1=qz1qz2
这样得出结论：第二条样式优先级高，背景色为green。
但结果却是red，这也证明了权重是按优先级进行比较的。
总结下比较规则：
，从左向右逐个比较，前一级相等才能往后比较无论是行内样式、内部样式还是外部样式，都是按照以上提到的权重方式进行比较。面试的时候遇到优先级比较，如果答案是：行内idclass元素(标签)，我们以为给了能令面试官满意的答案，其实不然，比如对同一个元素操作，在权重相等的情况下，后面的样式会覆盖前面的，这样我们给出来的答案就不成立了权重相同的情况下，位于后面的样式会覆盖前面的样式通配符、子选择器、兄弟选择器，虽然权重为，但是优先于继承的样式!important例外规则当在一个样式声明中使用一个!important规则时，此声明将覆盖任何其他声明。
虽然，从技术上讲，!important与优先级无关，但它与最终的结果直接相关。
使用!important是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则，使得调试找bug变得更加困难了。
当两条相互冲突的带有!important规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
一定要优先考虑使用样式规则的优先级来解决问题而不是!important只有在需要覆盖全站或外部CSS的特定页面中使用!important永远不要在你的插件中使用!important永远不要在全站范围的CSS代码中使用!important最后，我们再来看个例子：
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"metaname="viewport"content="width=device-width,initial-scale=1.0"titleDocument/titlestyle*{padding:0;margin:0;font-size:24px;}.main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}p{color:yellowgreen}/*0,0,0,1*/.para{color:red}/*0,0,1,0*/.innerp{color:pink}/*0,0,1,1*/.mainp[class*="para"]{color:rgb(0,,)}/*0,0,2,0*//*权重相同，后者覆盖前者*/.mainp[class="para1"]{color:teal}/*0,0,2,0*/div.mainp[class="para2"]{color:blueviolet;}/*0,0,2,1*/.innerp:nth-child(4){color:cornflowerblue!important;}/*0,0,2,0,!important提升优先级*//style/headbodydivclass="main"divid="app"class="inner"pstyle="color:red;"我是红色的，内联样式生效/ppclass="para1"离离原上草，/ppclass="para2"一岁一枯荣。/ppclass="para3"野火烧不尽，/ppclass="para4"春风吹又生。/p/div/div/body/html
样式呈现的效果如下：
最后《前端面试题宝典》经过近一年的迭代，现已推出小程序和电脑版刷题网站（