首页 > div+css网页培训班 > CSS选择器及属性优先级代码

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中的顺序,后面的大于前面的;(见第五组)
    ⑤选择器中,层级长度相等,且标签名选择器数量相等,最后一个类越接近目标标签则优先级越高(见第二组);如果最后一个类相同则优先级相等(见第五组);

下面我们来看一下属性的优先级(不知道这样讲合不合适),在讲之前我们先来了解一下 !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 的优先级最高,其次就是行内样式,最后就是之前讲到的选择器优先级顺序。

 

CSSHack技术速查对照

css2.0手册  

css公用样式网页制作更简单

 

原文地址:http://www.35ui.cn/post/css.html

标签CSS选择器

上一条: jQuery图片延迟加载插件属性代码
下一条: jquery焦点函数input选中样式切换

或许你还对下面的文章感兴趣
  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码