1、什么是选取器优先级？ 浏览器经过优先级来判断那些属性值与一个元素最为关联，从而在该元素上应用这些属性值。优先级是基于区别种类选取器构成的匹配规则。以上字段定义来自https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity 先抛出个问题，下面例子字体颜色最后是什么颜色，以及为何？<div class="item" id="item">
item
</div>
<style>
#item {
color: #f00;
}/*红色*/
.item {
color: #0f0;
}/*绿色*/
</style>
答案很简单：红色。
这就触及到了优先级问题，同一起内容，咱们同时用了 ID选取器 和 类选取器,由于 ID选取器 优先级大于 类选取器 , 因此最后表示为红色。
2、优先级的计算规则
广泛已知选取器优先级关系是： 内联 > ID选取器 > 类选取器 > 标签选取器然则，浏览器详细的优先级算法是怎么样的？可能还有些人不晓得。《CSS Refactoring》中说到了算法的过程 。
A specificity is determined by plugging numbers into A, B, C, D): If the styles are applied via the style attribute, a=1; otherwise, a=0.B is equal to the number of ID selectors present.C is equal to the number of class selectors, attribute selectors, and pseudoclasses present.D is equal to the number of type selectors and pseudoelements present.翻译过来便是：
优先级是由于 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： 倘若存在内联样式，那样 A = 1, 否则 A = 0;B 的值等于 ID选取器（#id） 显现的次数;C 的值等于 类选取器（.class） 和 属性选取器（a[]） 和 伪类（:first-child） 显现的总次数;D 的值等于 标签选取器（div,span,a） 和 伪元素（::before,::after） 显现的总次数 。以上理论按照奉上，先上个栗子：
#name > div > span > a.hover
套用上面的算法，依次求出 A B C D 的值： 由于无内联样式 ，因此 A = 0ID选取器总共显现了1次， B = 1类选取器显现了1次， 属性选取器显现了0次，伪类选取器显现0次，因此 C = (1 + 0 + 0) = 1标签选取器显现了3次， 伪元素显现了0次，因此 D = (3 + 0) = 3经过以上过程算出的A 、 B、C、D 能够简记作：(0, 1, 1, 3)。
为了熟悉把握优先级算法 ，咱们再来做有些练习：
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
.a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#name /* (0, 1, 0, 0) */
li:nth-child(odd) main .name /* (0, 0, 2, 2) */
#name .active > a:hover /* (0, 1, 2, 1) */
html body #name .active > a:hover /* (0, 1, 2, 3) */
经过一段小代码的练习已然能清楚了优先级是怎么算的了。但
| 
发表于 2024-6-30 07:04:28
