css的优先级

来源:互联网 发布:c java finalize 编辑:程序博客网 时间:2024/06/05 10:19

关于css的优先级

1.  元素本身自带的指定属性大于从父元素集成过来的。

2.  #ID>.Class>标签选择符

3.  越具体越强大 当对某个元素的css选择符定义的越具体层级越明确  该定义的优先级别越高

4.  #ID<标签 #ID,.Class<标签.Class

 

对于同一元素有多个class 越后面的优先级越高,css文件越后载入的样式优先级别越高

上面的要优先级别顺序是1>2>3>4

 

1.  <div style="font-size:8px">

      <div style="font-size:10px">我的字体大小是10px</div>

     </div>

2   <style type="text/css">

      #class1 {font-size:8px; color: red;}

       .class2 {font-size:10px; color:green;}

       .class3 {font-size:11px; color:black;}

       #class1 .class4{font-size:18px; color:yellow}

         .calss4 {font-size:20px; color:blue}

     </style>

      <div id="class1" class="class2">

                 我的字体是8px;   color:red;                                                     #class1优先

              <div class="class2 class3"> 我的字体是11px, color:black</div>   .class3优先

              <div class="class4"> 我的字体是18培训;color:yellow</div>        #class1 .class4 优先

      </div>

3.   <style type="text/css">

           div #class1 {font-size:8px; color:red;}

           #class1 {font-size:20px; color:black;}

           div .class2{font-size:12px; color:green;}

           .class2{font-size:44px; color: yellow;}

      </style>

     <div id="class1">

              我的字体是20px color:black

     </div>

     <div class="class2">

                  我的字体是44px;color:yellow

     </div>

 

 

http://www.52css.com/article.asp?id=1007

原创粉丝点击