CSS选择器优先级以及权重计算方法

今天面试的时候面试官提问了选择器优先级的问题，本身是知道这个问题的答案的，由于第一次面试紧张，各种选择器的名字被置于脑后，一切的根源还是因为不够熟悉，所以通过这篇博客加强并深入了解选择器优先级的问题。

一、选择器优先级： !Important>行内样式>ID 选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性

1. !important：!important拥有最高的优先级，加上!importanrt可以覆盖父级的样式，使用方法为直接在样式后添加加上!importanrt，如 color : red !important;
2. 行内样式：行内样式指写在标签style属性中的样式，优先级仅次于!important，缺点为多个元素难以共享样式，不利于代码复用；HTML和CSS代码混杂，结构样式没有分离，不利于后期维护。所以建议尽量少使用行内样式。
3. ID选择器：ID 选择器会根据该元素的 ID 属性中的内容匹配元素，一个id只能使用一次。
4. 类选择器：类选择器会根据元素的类属性中的内容匹配元素，可以重复使用，是最常用的选择器。
5. 标签选择器：标签选择器是指用HTML标签名称作为选择器，优点是能快速为页面中同类型的标签统一样式，缺点是不能设计差异化样式。
6. 通配符选择器：通配符选择器为*，指给当前界面上所有的标签设置属性。由于通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差。
7. 继承：继承指当子元素没有设置某个属性时，会继承父元素的属性。
8. 浏览器默认属性：浏览器本身设置好的属性，若未对元素设置属性，则会设置为浏览器默认属性。

注：关于继承的详情

1. 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-break-before和unicode-bidi。

2. 所有元素可继承：visibility和cursor。

3. 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

4. 块状元素可继承：text-indent和text-align。

5. 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

6. 表格元素可继承：border-collapse。

 二、CSS权重

         1.权重：

                 第一等 ：内联样式，如：style="color:red;"，权值为 1000.（该方法会造成 css 难以管

                理，所以不推荐使用）。

                 第二等 ：ID 选择器，如：#header，权值为 0100。

                 第三等 ：类、伪类、属性选择器如：.bar， 权值为 0010。

                 第四等 ：标签、伪元素选择器，如：div ::first-line 权值为 0001。

                最后把这些值加起来，再就是当前元素的权重了。

                 其他 ：

                        无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义

                        的元素样式。（ie6 支持上有些 bug）

                        通配符，子选择器，相邻选择器等。如*，>,+, 权值为 0000。

                        继承的样式没有权值。

        2.CSS 权重计算方式

                2.1.计算选择符中的 ID 选择器的数量（=a）

                2.2.计算选择符中类、属性和伪类选择器的数量（=b）

                2.3.计算选择符中标签和伪元素选择器的数量（=c）

                2.4.忽略全局选择器

                2.5.在分别计算 a、b、c 的值后，按顺序连接 abc 三个数字组成一个新的数字，改值即

                      为所 计算的 选择符的权重。如果两个选择符的计算权重值相同，则采取“就近原则”。

                示例：

div#app.child[name="appName"] /*a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121*/

                 注：CSS 选择器：

                1、id 选择器（ # myid）

                2、类选择器（.myclassname）

                3、标签选择器（div, h1, p）

                4、相邻选择器（h1 + p）

                5、子选择器（ul > li）

                6、后代选择器（li a）

                7、通配符选择器（ * ）

                8、属性选择器（a[rel = "external"]）

                9、伪类选择器（a:hover, li:nth-child）