2018最实用的CSS选择器权重分析

目前对于经常做前端开发的小伙伴们，接触最多的莫过于HMTL CSS JS，其中关于CSS选择器的并用套用，一直是前端开发攻城狮面临的最熟悉的工作。如果只是简单的一两个或一两种选择器套用并无伤大雅，根据我们的CSS基础知识选择器的权重大小排序即可，如果关于复杂的选择器套用，七八种甚至十种以上不同的选择器套用，我们还可以按照!important > 内联样式 > ID选择器 > CLASS选择器 > 标签选择器 > 通配符选择器，这样只存在比较大小式的简单排序使用和区分选择器吗？小菌今天为大家详细介绍每种选择器的权重值和使用方法，对做前端开发的小伙伴在选择器上的使用可以感受到飞一般的感觉！

首先说明一下其实对于上面介绍的每种选择器都有固定的权重值的，如果只是简单比较大小，对于数量简单的选择器可以区别得开，但是一但数量种类均繁多的时候，我们需要按照每种选择器的权重进行叠加，然后把每个样式里选择器权重值叠加对其他样式的选择器权重值进行比较，即可区分浏览器会优先使用哪一种样式啦！

!important选择器权重值最大，普遍理解为正无穷即Infinity，如果非要以数值附属可暂时使用10000。

内联样式选择器即在元素标签内增加style=" "，它的权重值为01000。

ID选择器即以#开头表示的，权重值为00100。

CLASS、属性、伪类选择器分别以.class [class] a:link等形式表示，它们的权重值都为00010。

标签、元素、伪元素例div标签或:first-line等伪元素，它们的权重值都为00001。

通配符例如* > +等他们权重值为0。

继承样式无权重值！

值得一提的是CSS样式选择器的权重值进制并非10进制，而是256进制，也就是说按照正常10进制的理解，在数值达到255要再加1的时候才会前进一位，也就是class选择器权重值比标签选择器要大255，就目前前端开发关于CSS权重值的场景应用不会十分繁杂；各位童鞋记住权重值大小即可活学活用在一个CSS样式里如遇见多种选择器，每种必然不会达到255个数量之多，所以进制的考虑并非绝对可以用到，简单上下叠加已足够使用，欢迎小伙伴们与小菌一起交流技术上的开发知识。下面附图一张，供菌们参考。