CSS选择器的权重以及优先级

一、特殊性

通常情况下，我们可以通过多种方法选择某个HTML元素；也就是说，对于同一个元素可以使用两个甚至更多的规则来选择。然而，一个元素只能匹配一对规则。对于每个规则，浏览器会计算选择器的特殊性；特殊性会决定哪个样式属性最终胜出。

选择器的特殊性分为4个部分，即：0，0，0，0。规则如下：

• 对于内联样式（即在HTML页面中给元素标签加style样式），值为1，0，0，0；
• 对于ID选择器（#nav），值为0，1，0，0；
• 对于class类选择器（.nav）、属性选择器（[type="text"]）、伪类选择器（:hover），值为0，0，1，0；
• 对于元素（div，nav）和伪元素（::before），值为0，0，0，1；
• 结合符对特殊性没有贡献，而通配符选择器值为0，0，0，0（对总特殊性没有影响）。

计算一个组合选择器的特殊性的时候就先计算各种选择器的数量以及对应的特殊性再相加，例如：

#nav {  }    /* 0，1，0，0  ID选择器 */
.asidebar {  }    /* 0，0，1，0  class类选择器 */
.footer.fix {  }    /* 0，0，1，0  多类选择器 */
input[type="text"] {  }    /* 0，0，1，1  1个属性选择器，1个元素选择器 */
a:hover {  }    /* 0，0，1，1  1个伪类选择器，1个元素选择器 */
header {  }    /* 0，0，0，1  元素选择器 */
nav.nav a:hover {  }    /* 0，0，2，2  1个类选择器，1个伪类选择器，2个元素选择器 */
header#caption i {  }    /* 0，1，0，2  1个ID选择器，2个元素选择器 */
* {  }    /* 0，0，0，0  1个通用选择器 */

比较选择器特殊性是从左向右依次比较的，值越大则权重越大，如果相同，就比较下一位。所有位都一样则权重是一样的，但是，一个声明在样式表或者文档中越靠后他的权重会越大，所以后声明的样式会覆盖前面声明的样式。

二、重要性

重要声明能超过所有其他声明，用!important来标识。

nav#navi a#home { color: #F00; }
nav a { color: #999 !important; }

<nav id="navi"><a id="home" href="/"></a></nav>

上面的代码片段会获得一个颜色为999的超链接；虽然第一个样式声明有非常高的特殊性（0，2，0，2），但是第二个样式使用了重要声明!important，这显得特殊性无关紧要。如果要显示颜色为F00，给第一个样式也添加重要声明就能实现。

nav#navi a#home { color: #F00 !important; }

 

注：第一次写博客，请大家多多指教。

转载于:https://my.oschina.net/dh20/blog/1624485