css选择器的优先级详解

CSS样式定义多了，常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。

1. 多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低：

               ！important的用户样式
         ！important的作者样式
         作者样式
         用户样式
         浏览器定义的样式

   用户指的是：网页浏览者；作者指的是：网页制作者！

2. CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。

   
   

   1.如果样式是行内样式（通过Style=””定义），那么a=1
   2.b为ID选择器的总数。
   3.c为Class类选择器的数量,连同伪类选择器。
   4.d为类型选择器的数量，连同HTML元素选择器。

   具体特殊性如下表：

   选择器	特殊性(a,b,c,d)	优先级
   Style=””	1,0,0,0	1000
   #wrapper #content {}	0,2,0,0	200
   #content .datePosted {}	0,1,1,0	110
   div#content {}	0,1,0,1	101
   #content p {}	0,1,0,1	101
   #content {}	0,1,0,0	100
   p.comment .dateposted {}	0,0,2,1	21
   div.comment p {}	0,0,1,2	12
   .comment p {}	0,0,1,1	11
   p.comment {}	0,0,1,1	11
   .comment {}	0,0,1,0	10
   div p {}	0,0,0,2	2
   p {}	0,0,0,1	1

   这里还有一种情况： 权重一样时如何处理？

    

3. CSS样式的层叠原则——谁离我近，谁说了算。

   当权重一样时，会采用“层叠原则” 后定义的会被应用。
   如：p{color:yellow}
           p{color:red}
   作用到这里   <. p >我的什么颜色呢？< /p>
   结果会是red的。

4. CSS样式的特殊标记——谁有特权，谁说了算。

   如果有人看不顺眼，非得要自己说了算，那可以搞点特权，如下即可
   p {color:blue !important;}
   加上!important;可将自己权重设为最高。

原创文章如转载，请注明：转载自火跃
本文网址：http://www.huoyue.org/css_selector