小虾虎鱼

小虾虎鱼

CSS选择器及属性优先级

作者 禾惠 发表于 2013/01/04,最后修改于 2013/01/04

熟悉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中的顺序,后面的大于前面的;(见第五组)

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


下面我们来看一下属性的优先级(不知道这样讲合不合适),在讲之前我们先来了解一下 !important 。可能在大家最早接触 !important 是在用CSS的hack方法,其实我个人认为 !important 并非是用在hack方法里面,因为所有浏览器都能识别!important , 那 !important 到底是一个什么样的东西?来看看下面的例子:

<style>
#aa{color:blue;}
.bb{color:red!important;}
</style>
      
<div style="color:green;" class="bb">!important是个不错的东西哦,知道我显示的是什么颜色吗?</div>

当你测试的上面这段代码你会发现里面的文字显示的是红色,不是绿色,更不是蓝色。我想此时你已经猜到了!important的作用了。!important的优先级是最高的,比行内样式的优先级还要高。你也可以尝试将 !important 去掉 ...

从上面的那段代码中,我们可以得出这样一个结论:

 使用 !important 的优先级最高,其次就是行内样式,最后就是之前讲到的选择器优先级顺序。