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

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

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

!important：!important拥有最高的优先级，加上!importanrt可以覆盖父级的样式，使用方法为直接在样式后添加加上!importanrt，如 color : red !important;

行内样式：行内样式指写在标签style属性中的样式，优先级仅次于!important，缺点为多个元素难以共享样式，不利于代码复用；HTML和CSS代码混杂，结构样式没有分离，不利于后期维护。所以建议尽量少使用行内样式。

ID选择器：ID 选择器会根据该元素的 ID 属性中的内容匹配元素，一个id只能使用一次。

类选择器：类选择器会根据元素的类属性中的内容匹配元素，可以重复使用，是最常用的选择器。

标签选择器：标签选择器是指用HTML标签名称作为选择器，优点是能快速为页面中同类型的标签统一样式，缺点是不能设计差异化样式。

通配符选择器：通配符选择器为*，指给当前界面上所有的标签设置属性。由于通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差。

继承：继承指当子元素没有设置某个属性时，会继承父元素的属性。

浏览器默认属性：浏览器本身设置好的属性，若未对元素设置属性，则会设置为浏览器默认属性。

注：关于继承的详情

不可继承的：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。

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

内联元素可继承：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。

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

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

表格元素可继承：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）