CSS选择器及属性优先级

熟悉CSS选择器的优先级可以适当的减少CSS的开发时间，同时也能减少CSS的代码量。下面来讲讲我个人对CSS选择器优先级的认识。

常用的CSS选择器有以下5种：

一、标签名选择器，如：

div{}

二、类选择器，如：

.test{}

三、ID选择器，如：

#test{}

四、后代选择器，如：

.wrap div{}
.wrap .test{}

五、群组选择器，如：

div,p,li,span{}
.wrap p, .wrap .test{}

仔细看会发现，其实“后代选择器”和“群组选择器”其实就是上面三种的组合。

上面前三种选择器的优先级的关系： ID选择器 > 类选择器 > 标签名选择器

当然，在我们正常的使用过程中并非这么简单。看下面一组代码：

HTML：

<div class="cc">
    <div class="bb" id="ss">
        <p class="aa">CSS选择器优先级</p>
    </div>
</div>

CSS：

/*第一小组*/
.aa{color:blue;}
.bb .aa{color:red;}
        
/*第二小组*/
.cc .bb{color:blue;}
.cc .aa{color:red;}
                  
/*第三小组*/
#ss{color:blue;}
#ss .aa{color:red;}
.cc .bb .aa{color:green;}
               
/*第四小组*/
.aa{color:blue;}
p.aa{color:red;}
              
/*第五小组*/
.bb .aa{color:blue;}
.bb p.aa{color:green;}
div.bb .aa{color:orange;}
div.bb p.aa{color:red;}

第一组的优先级： .bb .aa  >  .aa

第二组的优先级： .cc .aa  >  .cc .bb

第三组的优先级： #ss .aa  >  #ss  >  .cc .bb .aa

第四组的优先级： p.aa  >  .aa

第五组的优先级： div.bb p.aa  >  .bb p.aa  =  div.bb .aa  >  .bb .aa （暂不考虑在CSS中的顺序，以下也是）

四组综合起来的优先级（从上到下按高到低的顺序）：

#ss .aa

#ss

.cc .bb .aa

div.bb p.aa

div.bb .aa  =  .bb p.aa

.bb .aa  =  .cc .aa

.cc .bb

p.aa

.aa

从上面的优先级关系，我个人得出这样一个规律（不考虑 .cc #ss这种情况）：

    ①ID选择器的优先级高于 类选择器和标签名选择器；（见第三组）

    ②选择器中含有相同的ID（不考虑 .cc #ss），选择器层级越长优先级越高；（见第三组）

    ③选择器中，全部是类的情况下，选择器层级越长优先级越高；（见第一组）

    ④选择器中，层级长度相等，含有标签名选择器的优先级高于不含有标签名的选择器；含有的标签名选择器多的高于少的；含有的标签名选择器数量相同优先级相等此时需要看在CSS中的顺序，后面的大于前面的；（见第五组）

    ⑤选择器中，层级长度相等，且标签名选择器数量相等，最后一个类越接近目标标签则优先级越高（见第二组）；如果最后一个类相同则优先级相等（见第五组）；