CSS优先级

百度笔试有一道类似这样的题目：

如下CSS和html，最终文本的颜色是？

<style>
#wrapper .container .sfaf{
     color: pink;
 }
 #wrapper p{
     color: yellow;
 }
 p#shold{
     color: blue;
 }
 p.sfaf{
     color: black;
 }
</style>
<div id="wrapper">
    <div class="container">
        <p id="shold" class="sfaf">fafafafafa</p>
    </div>
</div>

浏览器运行结果如下：

原理：
这是由于CSS层叠的原因，CSS使用选择器的特殊性来指定最终结果：

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如0，0，0，0 .
1. 对选择器中给定的各个ID属性值，加 0，1，0，0；
2. 对选择器中给定的各个类属性值、属性选择器或者伪类，加0，0，1，0；
3. 对选择器中给定的各个元素和伪元素，加0，0，0，1；
4. 其他（结合符、通配符）对特殊性没有贡献；
5. 内联样式，第一个特殊值表示。同时内联样式对本元素优先级较高，但是对于子元素的影响较弱，只作为继承属性时有效

所以：
分别为：

• 0，1，1，1 ->pink √
• 0，1，0，1 ->yellow
• 0，1，0，1 ->blue
• 0，0，1，1 ->black

参考资料：CSS权威指南