深入理解CSS选择器优先级的计算 - jerrylsxu
选择器的优先级关系到元素应用哪个样式。在CSS2.1的规范（http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity）中是这样描述的：
- 如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)（HTML元素的style属性也是样式规则，因为这些样式规则没有选择器，因此记为a=1,b=0,c=0,d=0）
- 计算选择器中 ID 属性的个数 (= b)
- 计算选择器中其他属性(类、属性选择器)和伪类的个数 (= c)
- 计算选择器中元素名称和伪元素的个数 (= d)
将四个数字按 a-b-c-d 这样连接起来（位于大数进制的数字系统中），构成选择器的优先级。
在最新的Selector Level 3规范中：
- 计算选择器中 ID 属性的个数 (= a)
- 计算选择器中其他属性(类、属性选择器)和伪类的个数 (= b)
- 计算选择器中元素名称和伪元素的个数 (= c)
- 忽略通用选择器*
将三个数字按 a-b-c这样连接起来（位于大数进制的数字系统中），构成选择器的优先级。style属性计算参考css2.1规范。
问题：
1、选择器的整体优先级如何计算，是像网上说的a*1000+b*100+c*10+d吗？
答：不是。这种回答明显是望文生义。四级（a、b、c、d）之间并不是简单的相加关系。同一级（例如：a对a）的才具有可比关系。
分析：
以下为webkit的webCore中关于优先级计算的代码（http://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSSelector.cpp）
unsigned CSSSelector::specificity() <span style="color: #0000ff;">const</span><span style="color: #000000;">
{
</span><span style="color: #008000;">//</span><span style="color: #008000;"> make sure the result doesn't overflow</span>
<span style="color: #0000ff;">static</span> <span style="color: #0000ff;">const</span> unsigned maxValueMask = <span style="color: #800080;">0xffffff</span><span style="color: #000000;">; // 整个选择器的最大值，十进制表示：idMask + classMask + elementMak = <span>16777215</span>
</span><span style="color: #0000ff;">static</span> <span style="color: #0000ff;">const</span> unsigned idMask = <span style="color: #800080;">0xff0000</span><span style="color: #000000;">; // ID选择器的最大值，十进制表示：(16*16+16)*16^4=<span>16711680</span>
</span><span style="color: #0000ff;">static</span> <span style="color: #0000ff;">const</span> unsigned classMask = <span style="color: #800080;">0xff00</span><span style="color: #000000;">; // class（伪类、类）选择器的最大值，十进制表示：(16*16+16)*16^2=65280
</span><span style="color: #0000ff;">static</span> <span style="color: #0000ff;">const</span> unsigned elementMask = <span style="color: #800080;">0xff</span><span style="color: #000000;">; // 元素选择器的最大值，十进制表示：16*16+16=255
</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (isForPage())
</span><span style="color: #0000ff;">return</span> specificityForPage() &<span style="color: #000000;"> maxValueMask;
unsigned total </span>= <span style="color: #800080;">0</span><span style="color: #000000;">;
unsigned temp </span>= <span style="color: #800080;">0</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">const</span> CSSSelector* selector = <span style="color: #0000ff;">this</span>; selector; selector = selector-><span style="color: #000000;">tagHistory()) {
temp </span>= total + selector-><span style="color: #000000;">specificityForOneSelector();
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Clamp each component to its max in the case of overflow.</span>
<span style="color: #0000ff;">if</span> ((temp & idMask) idMask)) // 判断是否为ID选择器
total |=<span style="color: #000000;"> idMask; // 保证ID选择器的同类叠加不会超过ID选择器的总最大值，下同
</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> ((temp & classMask) classMask))
total |=<span style="color: #000000;"> classMask;
</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> ((temp & elementMask) elementMask))
total |=<span style="color: #000000;"> elementMask;
</span><span style="color: #0000ff;">else</span><span style="color: #000000;">
total </span>=<span style="color: #000000;"> temp;
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> total;
}
inline unsigned CSSSelector::specificityForOneSelector() </span><span style="color: #0000ff;">const</span><span style="color: #000000;">
{
</span><span style="color: #008000;">//</span><span style="color: #008000;"> FIXME: Pseudo-elements and pseudo-classes do not have the same specificity. This function
</span><span style="color: #008000;">//</span><span style="color: #008000;"> isn't quite correct.</span>
<span style="color: #0000ff;">switch</span><span style="color: #000000;"> (m_match) {
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Id:
</span><span style="color: #0000ff;">return</span> <span style="color: #800080;">0x10000</span><span style="color: #000000;">; // ID选择器权重
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> PseudoClass:
</span><span style="color: #008000;">//</span><span style="color: #008000;"> FIXME: PsuedoAny should base the specificity on the sub-selectors.
</span><span style="color: #008000;">//</span><span style="color: #008000;"> See </span><span style="color: #008000; text-decoration: underline;">http://lists.w3.org/Archives/Public/www-style/2010Sep/0530.html</span>
<span style="color: #0000ff;">if</span> (pseudoClassType() == PseudoClassNot &&<span style="color: #000000;"> selectorList())
</span><span style="color: #0000ff;">return</span> selectorList()->first()-><span style="color: #000000;">specificityForOneSelector();
FALLTHROUGH;
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Exact:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Class:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Set:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> List:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Hyphen:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> PseudoElement:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Contain:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Begin:
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> End:
</span><span style="color: #0000ff;">return</span> <span style="color: #800080;">0x100</span><span style="color: #000000;">; // class选择器权重
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Tag:
</span><span style="color: #0000ff;">return</span> (tagQName().localName() != starAtom) ? <span style="color: #800080;">1</span> : <span style="color: #800080;">0</span><span style="color: #000000;">; // 元素选择器权重
</span><span style="color: #0000ff;">case</span><span style="color: #000000;"> Unknown:
</span><span style="color: #0000ff;">return</span> <span style="color: #800080;">0</span><span style="color: #000000;">;
}
ASSERT_NOT_REACHED();
</span><span style="color: #0000ff;">return</span> <span style="color: #800080;">0</span><span style="color: #000000;">;
}</span>登录后复制
从上面的代码可以看出，在webkit中，对于a级选择器（“style”属性的样式规则），根本不参与优先级运算的过程。对于b级（ID选择器）、c级（class选择器）、d级（元素选择器），每一级都有自己的最大值（最大数目255），超出时就会应用其最大值（最大数目）。b级最大值为0xff0000(16711680)，权重为0x1000（65536），数目超过256时仍然使用最大值。c级、d级相似。所以并不存在低一级超出一定数目后导致高一级进一出现覆盖的情况。在一个选择器组（em：#a .d div）中，所有选择器的加和不会超过16777215（每一类的选择器都保证了不会超出最大值的情况）。demo：http://jsbin.com/duker/2。对于！important，webkit是走的另一条路径（具有！important的样式规则大于没有！important的样式规则，只有在同时具有！important属性时才会比较选择器的整体优先级）。整体来说，在webkit中，!important>inline style>ID>class>tag。
webkit是在http://trac.webkit.org/changeset/130444/trunk/Source/WebCore/css/CSSSelector.cpp这一次的修订中加上对于优先级溢出的处理的（chrome发布版本很快，今年改用了blink，可以认为chrome都遵守了特殊性（优先级）计算的标准）：
时间戳:2012-10-04 19:04:44 (20个月前)作者:commit-queue@webkit.org消息:选择器特殊性类别溢出到高类别
https://bugs.webkit.org/show_bug.cgi?id=98295Patch by Tab Atkins jackalmage@gmail.com> on 2012-10-04
Reviewed by Eric Seidel.这一次添加的补丁是为了对于CSS选择器的特殊性添加溢出策略。
以前我们并不会检测每个类别的特殊性溢出问题。原始的策略是：把每个类别存储为一个字节（2^8=256），然后整体存在一个无符号整型数中。这样的话就会导致256个同一类别的单选择器等于1个高类别的选择器。但是这违反了选择器的特殊性规则，导致样式规则排序问题。
Tests: /fast/selectors/specificity-overflow.html
- css/CSSSelector.cpp:
(WebCore::CSSSelector::specificity):
mozilla中关于优先级计算的代码（地址为http://hg.mozilla.org/mozilla-central/file/7297dedf2416/layout/style/StyleRule.cpp（472行-537行））：
int32_t nsCSSSelector::CalcWeightWithoutNegations() <span style="color: #0000ff;">const</span><span style="color: #000000;">
{
int32_t weight </span>= <span style="color: #800080;">0</span><span style="color: #000000;">;
#ifdef MOZ_XUL
MOZ_ASSERT(</span>!(IsPseudoElement() &&<span style="color: #000000;">
PseudoType() </span>!= nsCSSPseudoElements::ePseudo_XULTree &&<span style="color: #000000;">
mClassList),
</span><span style="color: #800000;">"</span><span style="color: #800000;">If non-XUL-tree pseudo-elements can have class selectors </span><span style="color: #800000;">"</span>
<span style="color: #800000;">"</span><span style="color: #800000;">after them, specificity calculation must be updated</span><span style="color: #800000;">"</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">#else</span><span style="color: #000000;">
MOZ_ASSERT(</span>!(IsPseudoElement() &&<span style="color: #000000;"> mClassList),
</span><span style="color: #800000;">"</span><span style="color: #800000;">If pseudo-elements can have class selectors </span><span style="color: #800000;">"</span>
<span style="color: #800000;">"</span><span style="color: #800000;">after them, specificity calculation must be updated</span><span style="color: #800000;">"</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">#endif</span><span style="color: #000000;">
MOZ_ASSERT(</span>!(IsPseudoElement() && (mIDList ||<span style="color: #000000;"> mAttrList)),
</span><span style="color: #800000;">"</span><span style="color: #800000;">If pseudo-elements can have id or attribute selectors </span><span style="color: #800000;">"</span>
<span style="color: #800000;">"</span><span style="color: #800000;">after them, specificity calculation must be updated</span><span style="color: #800000;">"</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span> (nullptr !=<span style="color: #000000;"> mCasedTag) {
weight </span>+= <span style="color: #800080;">0x000001</span><span style="color: #000000;">;
}
nsAtomList</span>* list =<span style="color: #000000;"> mIDList;
</span><span style="color: #0000ff;">while</span> (nullptr !=<span style="color: #000000;"> list) {
weight </span>+= <span style="color: #800080;">0x010000</span><span style="color: #000000;">;
list </span>= list-><span style="color: #000000;">mNext;
}
list </span>=<span style="color: #000000;"> mClassList;
#ifdef MOZ_XUL
</span><span style="color: #008000;">//</span><span style="color: #008000;"> XUL tree pseudo-elements abuse mClassList to store some private
</span><span style="color: #008000;">//</span><span style="color: #008000;"> data; ignore that.</span>
<span style="color: #0000ff;">if</span> (PseudoType() ==<span style="color: #000000;"> nsCSSPseudoElements::ePseudo_XULTree) {
list </span>=<span style="color: #000000;"> nullptr;
}
</span><span style="color: #0000ff;">#endif</span>
<span style="color: #0000ff;">while</span> (nullptr !=<span style="color: #000000;"> list) {
weight </span>+= <span style="color: #800080;">0x000100</span><span style="color: #000000;">;
list </span>= list-><span style="color: #000000;">mNext;
}
</span><span style="color: #008000;">//</span><span style="color: #008000;"> FIXME (bug 561154): This is incorrect for :-moz-any(), which isn't
</span><span style="color: #008000;">//</span><span style="color: #008000;"> really a pseudo-class. In order to handle :-moz-any() correctly,
</span><span style="color: #008000;">//</span><span style="color: #008000;"> we need to compute specificity after we match, based on which
</span><span style="color: #008000;">//</span><span style="color: #008000;"> option we matched with (and thus also need to try the
</span><span style="color: #008000;">//</span><span style="color: #008000;"> highest-specificity options first).</span>
nsPseudoClassList *plist =<span style="color: #000000;"> mPseudoClassList;
</span><span style="color: #0000ff;">while</span> (nullptr !=<span style="color: #000000;"> plist) {
weight </span>+= <span style="color: #800080;">0x000100</span><span style="color: #000000;">;
plist </span>= plist-><span style="color: #000000;">mNext;
}
nsAttrSelector</span>* attr =<span style="color: #000000;"> mAttrList;
</span><span style="color: #0000ff;">while</span> (nullptr !=<span style="color: #000000;"> attr) {
weight </span>+= <span style="color: #800080;">0x000100</span><span style="color: #000000;">;
attr </span>= attr-><span style="color: #000000;">mNext;
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> weight;
}
int32_t nsCSSSelector::CalcWeight() </span><span style="color: #0000ff;">const</span><span style="color: #000000;">
{
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Loop over this selector and all its negations.</span>
int32_t weight = <span style="color: #800080;">0</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">const</span> nsCSSSelector *n = <span style="color: #0000ff;">this</span>; n; n = n-><span style="color: #000000;">mNegations) {
weight </span>+= n-><span style="color: #000000;">CalcWeightWithoutNegations();
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> weight;
}</span>登录后复制
和webkit一样，inline style元素不计入计算。对于b级（ID）、c级（class）、d级（tag）的最大值和最小值也都和webkit保持一致。不同的是在mozilla中并没有对于同一类别的选择器进行最大值控制，而是结果直接相加。这样的话就会导致同一级选择器数目多于255时高一级进一，也就是结果溢出的问题。而且对于整个选择器组的优先级计算因为没有类似于webkit的按位与运算来保证结果不溢出，只是简单的相加，在mozilla中就可能出现溢出的问题。
因为IE无法阅读代码，所以对于IE系列只能采取demo测试的方法来确认问题。在所有IE系列（q、s）中，表现都和mozilla一致。包括最新的IE11。
注：CSS选择器还有一个继承性：
test text
在所有浏览器中文字都会应用p {font-size:24px;}。如果把这句去掉的话，就会应用*{font-size:40px;}，*包括p。（继承的样式没有优先级）
结论：
1、优先级计算时跨级相加应注意溢出问题；
2、优先级计算不包括inline style和!important；
3、优先级计算只有同一类别才具有可比性（一般也不会有人定义超出255个的同一选择器）。
顺便引用stackoverflow上的一个回答来结束这篇文章：
I am currently using the book CSS Mastery: Advanced Web Standards Solutions.
Chapter 1, page 16 says:
To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors. Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors.
参考文章：
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
仓库：如何复兴队友
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
2 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间？
4 周前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保护它？
4 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？
Mar 04, 2025 pm 12:32 PM
公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，
如何高效地在网页中为PNG图片添加描边效果？
Mar 04, 2025 pm 02:39 PM
本文展示了使用CSS为网页中添加有效的PNG边框。 它认为，与JavaScript或库相比，CSS提供了出色的性能，详细介绍了如何调整边界宽度，样式和颜色以获得微妙或突出的效果
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
