CSS选择器特殊性与重要性

特殊性

在编写CSS代码的时候，我们会出现多个样式规则作用于同一个元素的情况，例如

<header>
  <nav
    class="nav-main"
    id="navigation">Here background</nav>
</header>

header nav {
  background-color: red;
}

#navigation {
  background-color: green;
}

.nav-main {
  background-color: blue;
}

以上三个样式规则都会作用于 ID 值为 "navigation" 的 nav 标签，最终哪个样式规则会生效呢，这取决于选择器的特殊性(或者叫优先级，或者叫权重)高低，选择器特殊性高的样式会覆盖特殊性低的样式，经过测试 nav 标签的背景会显示为 green 绿色。

那么选择器特殊性是如何计算的呢？

通常，我们使用四个以逗号分隔的数字来表示特殊性，比如:

1. 每个元素或伪元素选择器贡献特殊性为 0，0，0，1
2. 每个类、伪类或者属性选择器的特殊性为 0，0，1，0
3. 每个ID选择器的特殊性为 0，1，0，0
4. 结合符和通配符的对特殊性没有贡献

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

div ul li              /* 0,0,0,3    3个元素选择器 */

div.aside ol li        /* 0,0,1,3    1个类选择器，3个元素选择器 */

a:hover                /* 0,0,1,1    1个伪类选择器，1个元素选择器 */

div.navlinks a:hover   /* 0,0,2,2    1个类选择器，1个伪类选择器，2个元素选择器 */

.affix.top             /* 0,0,2,0    多类选择器 注 */

input[type="text"]     /* 0,0,1,1    1个属性选择器，1个元素选择器 */

input[name="sex"][type="radio"]
                       /* 0,0,2,1    2个属性选择器，1个元素选择器 */

#title em              /* 0,1,0,1    1个 ID 选择器，1个元素选择器 */

h1#title em            /* 0,1,0,2    1个 ID 选择器，2个元素选择器 */

*                      /* 0,0,0,0    1个通用选择器 */

注：多类选择器有多少个类就计算多少个类，不支持多类选择器的 IE6 会理解为一个类

比较选择器特殊性高低直接从左向右依次比较，数字大的则优先级更高，如果相同就比较下一位，所有位都相同则优先级是一样高，当选择器优先级一样高的时候后声明的样式会覆盖前面声明的样式

每个级别的优先级值是相互独立的，13个元素选择器写在一堆也不会比1个类选择器的特殊性高

第一个0是用于行内样式的，且仅用于行内样式

<nav style="background-color: gray;"></nav> <!-- 1,0,0,0 -->

特殊伪类

:not() 和 :is() 伪类自身并没有选择器的特殊性，其选择器的特殊性由传入其中的参数决定

:not(:checked) 
                       /* 0,0,1,0    1个伪类 */

因为传入 :not() 中的参数 :checked 是一个伪类，所以该选择器的特殊性和一个伪类是相等的

当同时传入多个参数的时候以参数中选择器特殊性最大的为准（多个参数是指用逗号进行分割的，单独传入一个多类并不属于多个参数的范畴）

:is(input[type="text"], .affix.top)
                       /* 0,0,2,0    2个类选择器 */

因为 .affix.top (0,0,2,0) 比 input[type="text"] (0,0,1,1) 特殊性更大，所以这个选择器的特殊性为 0,0,2,0

:where() 伪类没有选择器特殊性，无论传入的参数是什么，等于通配符

<h1 id="title">我是蓝色</h1>

:where(#title) {
  color: red;
}

* {
  color: blue;
}

重要性

有一样东西可以无视特殊性，那就是 !important。使用 !important 可以把任何样式规则标记为重要

.nav-main {
  background-color: blue !important;
  color: #666;
}

基本上，任何重要的样式规则都可以覆盖没有标记为重要的样式规则，

<div id="gohome">
  <a href="/" id="home">Home</a>
</div>

div#gohome a#home {
  color: red;
}

div a {
  color: green !important;
}

上面的代码会得到一个绿色 green 的链接，第一个规则有非常高的特殊性（0,2,0,2），

但是在 !important 面前一样没用，除非我们给第一个规则也标记为重要

div#gohome a#home {
  color: red !important;
}

div a {
  color: green !important;
}

这时候链接就变为红色 red 了，都标记为重要的情况下，则会使用前面提到的特殊性规则来解决，

所以使用 !important 的时候应当权衡，尽量不要用

另外，IE6 是支持 !important 的，只是不完全支持而已，当在同一个选择器中，在标记为重要的样式规则之后又重新定义了此样式则 !important 将失效

.header {
  color: red !important;     /* 标准浏览器 red */
  color: green;              /* IE6 green !important 失效 */
}

再有就是 IE6/7 可以允许在 !important 后面添加一些文字，依然能识别

.header {
  color: red !important ie;     /* ie6/7 red */
}