CSS 选择器权重计算规则
CSS 选择器权重计算规则
CSS 选择器（Selector）的权重（Specificity）决定了对于同一元素，到底哪一条 CSS 规则会生效。且仅有当多条 CSS 规则都对同一元素声明了相应样式时，才会涉及到权重计算的问题。
选择器的分类
正式计算选择器权重之前，先来看选择器是如何被分类的。
因为 CSS 选择器众多，在计算时，这些选择器被归为了三大类，按其权重由大到小依次为：
- ID 选择器：比如
#dialog - 类名选择器（class selector），属性选择器（attribute selector）及伪类选择器（pseudo class selector） ：比如
.btn，[type="radio"]，:hover - 元素类型选择器（type selector）和伪选择器（pseudo selector）：比如
h1，::before
其中两类特殊的样式会影响权重的生效，
- 一是内联样式：
style="color:red"。内联样式始终拥有最高的权值，会覆盖样式文件的样式。 - 另一个是
!important修饰词。应用该修饰词的规则权重会高于正常的规则，但不推荐。
其他选择器，
- 全局选择器：
* - 选择连接符：
+,>,-,,|| - 伪类反向选择器：
:not()
以上，对权重的计算没影响，即不参与计算。
权重的计算
根据以上对选择器的分类，对任意样式规则，可得到 (W,X,Y,Z) 这么一个值，其中，
W：标识是否有内联样式X：ID 的数量Y：类名选择器，属性选择器及伪类选择器的数量Z：元素选择器，伪选择器 的数量
对于同一元素身上的多条样式，对第条样式规则计算出上面四个值，然后从左往右逐个比较，数字大的胜出。
如果权重全部一样，后面的规则会生效。
示例
示例一
考察下面的示例代码：
<ul class="list">
<li class="list-item">item1</li>
<li class="list-item">item2</li>
<li class="list-item">item3</li>
</ul>
ul > li {
color: blue
}
.list > .list-item {
color: red;
}
-
先来分析第一条规则
ul > li，包含 2 个元素类型选择器，得到的权值为(0,0,0,2)。 -
再看
.list > .list-item，包含 2 个类名选择器，权值为(0,0,2,0)。
两者一对比，在进行到第三位时，后面的 2>0，所以后者胜出，它的样式将生效，列表颜色为红色。
示例二
<nav id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
nav#nav > li:hover{
color: purple;
}
li: nth-child(2):hover{
color:pink;
}
-
首先
nav#nav > li:hover规则中有 1 个 ID 选择器，2 个元素选择器以及 1 个伪类选择器，权值为(0,1,1,2) -
li: nth-child(2):hover中，2 个伪类选择器和 1 个类型选择器，权值为(0,0,2,1)
一对比，前者胜出，因为比较到第二位时，前者是 1 后者是 0。只要有大于的情况，后面的值就不用比较了。
因此列表中元素在 hover 时，会是紫色（purple）。