CSS选择器权重计算规则
CSS 选择器（Selector）的权重（Specificity）决定了对于同⼀元素，到底哪⼀条 CSS 规则会⽣效。且仅有当多条 CSS 规则都对同⼀元素声明了相应样式时，才会涉及到权重计算的问题。
选择器的分类
正式计算选择器权重之前，先来看选择器是如何被分类的。
hun>考会计证需要什么书因为 CSS 选择器众多，在计算时，这些选择器被归为了三⼤类，按其权重由⼤到⼩依次为：
ID 选择器：⽐如 #dialog
元素类型选择器（type lector）和伪选择器（pudo lector）：⽐如 h1，::before。
类名选择器（class lector），属性选择器（attribute lector）及伪类选择器（pudo class lector）：⽐如
.btn，[type="radio"]，:hover
magic其中两类特殊的样式会影响权重的⽣效，
⼀是内联样式：。内联样式始终拥有最⾼的权值，会覆盖样式⽂件的样式。
另⼀个是 !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>
refu
</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>
surrendered
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
the help
nav#nav > li:hover{
aldosteronecolor: purple;
}
全国四六级成绩查询getonli: 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）。
相关资源
