浅析CSS优先级与权重计算

什么是CSS权重？

权重决定了你css规则怎样被浏览器解析直到生效。

每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。

作为一名前端开发攻城狮，虽然你每天可能都在接触css，但是以下情形你能一眼看出文字的前景色是red还是blue吗？

<style type="text/css">
    .e>p{color:red;}
    .e p{color:blue}
</style>
<div class="e">
    <p>red or blue?</p>
</div>

<style type="text/css">
	#b{color:red;}
	.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:blue} 
</style>
<div class="a1">
    <div class="a2">
    <div class="a3">
        <div class="a4">
            <div class="a5">
                <div class="a6">
                    <div class="a7">
                        <div class="a8">
                            <div class="a9" id="a">
                                <div class="a10">
                                    <div class="a11" id="b">red or blue?</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           </div>
       </div>
    </div>
    </div>
</div>

由于Mobile Debug的网页调试控制台需要展示选中元素的css rule，所以我对css权重的计算规则做了一遍梳理，根据w3c官网的介绍https://www.w3.org/TR/CSS22/cascade.html#important-rules，觉得网上很多对权重的介绍存在出入的地方，特此记录。

CSS rule权重优先级应从5个维度依次分析，而不是网上某些分析文章中提到的(1000,100,10,1的加法运算)，w3c是拆分成!important+4个维度(a-b-c-d)的方式拆开说明的，此处我做了合并。

1. 存在!important的css rule优先级高于不存在!important的css rule.

<style>
    #l{color:red;}
    .l{color:blue!important;}
</style>
<div class="l" id="l">red or blue</div>

2. style=""的优先级高于带选择器的规则. 维度a(style="" 记为1 选择器规则记为0)

<style>
    .m{color:blue;}
</style>
<div class="m" style="color:red">red or blue</div>

3.选择器规则中#id 出现的次数. 维度b(1个#id记为1，统计#id出现的总数，记为n，n越大优先级越大)

<style>
    #n{color:blue;}
    .a .b{color:red;}
</style>
<div class="a" style="color:red">
    <p class="b" id="n">red or blue</p>
</div>

存在一种极端情况即文章开头第二段css范例中表现的，即使存在超过10个以上的.class选择器规则，优先级也无法超越由id命中的选择器规则，这也是网上多数文章对权重计算存在错误的地方，他们是分维度的，不能做简单的加法运算。

4.其他规则选择器（.class [attr] 和伪类） 维度c(统计这些选择器出现的总数，记为n，n越大优先级越大)

<style>
    .p [a]{color:red}
    .o{color:blue;}
</style>
<div class="p"><p a="b">red or blue</p></div>

5.标签选择器和伪元素 维度d(统计这些选择器出现的总数，记为n，n越大优先级越大)

<style>
    div p{color:blue;}
    div{color:red}
</style>
<div><p>red or blue</p></div>

6.特别指出， “*”选择器在上述各维度比较中不占权重，但是 "*" 的权重高于浏览器默认的css rule.

css rule优先级应按照上述罗列顺序比较，仅当该维度值相同时才进行下1维度的值计算比较，当所有维度值均相同时，则比较css rule加载顺序，后引用的css rule优先级高于先引用的css rule.

w3c将!important单独拆解描述的原因我想是因为a-b-c-d 4个维度是对规则选择器的解析，而!important作用在具体的某个样式上。

Mobile Debug CSS命中规则功能截图

Mobile Debug调试界面截图

宅小歪前端攻城师Mobile Debug作者

浅析CSS优先级与权重计算