css的优先级

本文详细介绍了CSS优先级的四个基本原则,并通过实例展示了不同选择器如何影响元素样式。了解这些原则有助于开发者更精确地控制网页布局。

关于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

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值