你曾经被CSS的优先级困扰么？为什么执行这条而不执行那条呢，很奇怪是么？
其实了解优先级后一切一目了然。
今天有点时间，就来整理一下CSS属性优先级，希望能对想要了解这个的朋友给予一些帮助。
普通情况下『只有外部CSS样式时』优先级是按照CSS选择符的长度来决定的，长度越长，权重就越高『也就是执行选择符最长的那条语句』
还有一种情况则不是这样，那就是出现 !important ，它表示重要的，先执行的。 这是一种特殊的情况，它的权重是最大的。
另外，一种过时的就是内联样式，也就是写在页面标签内的样式，这中样式也有普通和important之分，其权重分别和外联[外部样式]一样。
注：内联样式权重高于外部样式。
综上所述，用实例总结一下权重分配：
<style>
span.fColor{ color:black;}
.fColor{ color:yellow;}
.fColor{ color:red !important;}
</style>
<p class="fColor" style="color:blue; color:green !important;">颜色测试</p>
以上实例中很明显，显示颜色为green，因为这句包含两个权重高的方面color:green !important; 第一，它属于内联样式，就内联本身就排除了blue、green之外的颜色，剩下的两个再看important权限，所以最终显示颜色是green。
CSS选择器执行权重分配如下：
第一 style=”color:green !important;”
第二 .fColor{ color:red !important;}
第三 style=”color:blue;”
第四 span.fColor{ color:black;}
第五 .fColor{ color:yellow;}
其余的样式也就无外乎是不同类型的CSS选择器了[只要把握住CSS选择此越长权重越高就可以]，至于选择器的类型，大家可以看看这两篇文章来了解“css选择器”。
注：
下面这种形式或其他形式引用于标签内部的叫做内联样式
style="……"
以下两种形式引用的都叫外联样式：
<style>……</style>
<link href="css/style.css" rel="stylesheet" />
以上总结仅为个人观点，可能还有很多方面没有考虑全面，还请朋友们在评论中给予批评。
作者：付琦【F7】 转载注明：CSS属性优先级解说
第一 style=”color:green !important;”
第三 .fColor{ color:red !important;}
第二 style=”color:blue;”
第四 span.fColor{ color:black;}
第五 .fColor{ color:yellow;}
应该是这个顺序, 第二和第三楼主你应该是搞错了.
第一 style=”color:green !important;”
第二 .fColor{ color:red !important;}
第三 style=”color:blue;”
第四 span.fColor{ color:black;}
第五 .fColor{ color:yellow;}
应该是这个顺序, 第二和第三楼主你应该是搞错了.
非常感谢，一直没注意写错了，还是仁兄有眼力，谢谢！ 已经修正了。