大猫 (Madao) - まるでダメなおっさん

没听说过的CSS优先级

by bigCat 40 Comments

<div id="oo">
<div id="xx" class="room"></div>
</div>

CSS优先级早已烂记于心,那么就来见识下几道题目

div#xx {float:left}
#xx {float:right}

#xx左边还是右边?

#oo div {float:left}
#xx {float:right}

#xx左边还是右边?

#oo #xx {float:right}
div#oo div{float:left}

#xx左边还是右边?

#oo div {float:left}
.room{float:right}

#xx左边还是右边?

#oo .room{float:left}
#xx {float:right}

#xx左边还是右边?

#xx.room{float:left}
#oo div {float:right}

#xx左边还是右边?

div#oo .room{float:left}
#xx.room{float:right}

#xx左边还是右边?

答案统一起见,好像都是右边
哦,不对,和大部分男人一样,偏左边

仅以此文献给所有奋斗在前端的炮灰们

<!– 明城同学拿出小抄本(CSS2.1 的优先权图示)分享之 –>

Comments ( 40 )

  1. Replyfisio
    右手
    • ReplyBigCat
      @fisio, :twisted: 身边问了一圈,都是左边...
  2. Replyfinvola
    :twisted:
  3. Replyyuki
    :evil: 我脑疼,这个逻辑问题还是猫猫回答。。 :?: :)
  4. Replyyuki
    PS:今天去了下那个什么戴记好农庄,根本就是革命[痒痒]杀群众的地方。。又贵又难吃。。 :( :( :( :( :( :( :( :( :( :(
    • ReplyBigCat
      @yuki, :oops: 而且吃的人又多是不是
  5. Reply明城
    为广大淫民提供 CSS 优先权小抄一份,以后相关的 CSS 心中做个简单的加减法即可 http://www.gracecode.com/Archive/Display/1523
    • ReplyBigCat
      @明城, :roll: 抠手指头ing 原来对那篇文章的理解不够充分....还以为id优先级就比class高...
  6. Reply胡戈戈
    第一个 0,1,0,1(won) 0,1,0,0 第二个 0,1,0,1(won) 0,1,0,0 第三个 0,2,0,0(won) 0,1,0,2 第四个 0,1,0,1(won) 0,0,1,0 第五个 0,1,1,0(won) 0,1,0,0 第六个 0,1,1,0(won) 0,1,0,1 第七个 0,1,1,0 0,1,1,0(won) 第七个我感觉应该这样吧
    • Reply胡戈戈
      第七个现在修正为0,1,1,1(won) 0,1,1,0
      • ReplyBigCat
        @[痒痒]戈戈, :oops: 多亏了你呀~来拍拍脑袋
  7. Replyblankyao
    不懂不懂 :?: :?:
    • ReplyBigCat
      @blankyao, :( 每天被折磨
  8. Reply阿企
    关键在于如何理解css的顺序,div#xx这样的是相关选择符,#xx是独立的,so最后定义的优先级高。
    • ReplyBigCat
      @阿企, 在优先级相等的情况下才会后来居上 div#xx优先级要比#xx高....
  9. Replygeuro
    长见识了,我一直认为定义越详细优先级越高
    • ReplyBigCat
      @geuro, :idea: 网站大了后这种问题越来越突出...
  10. ReplyElton Disney
    跟男人一样偏向于左边~~ :lol:
    • ReplyBigCat
      @Elton Disney, 兄台难道也左边? ;)
      • ReplyElton Disney
        @BigCat, 呀,这都被你发现了~~ 一定要灭口
  11. Replyzing
    银魂上说,向右偏的是能成大事的人。。。 :P
    • ReplyBigCat
      @zing, 果如其然 那人抢了沙发 :lol:
  12. Reply打工皇帝
    呵呵。深刻学习了。
    • Replyzylew
      @打工皇帝, 还没被解脱出来?
  13. Reply小墨
    不是很懂 :roll: :roll:
  14. Replyzylew
    不懂不懂
  15. Reply舞命小丢
    不错的文章啊!很多时候自己也很晕,基本的优先权知道,但是叠加到一起有时还是有点晕!
    • ReplyBigCat
      @舞命小丢, :roll: 点头... 经常受到高权重的CSS影响....灰常崩溃
  16. Replyvampire
    这回你火星了。。。gracecode的博客我也经常看
    • ReplybigCat
      @vampire, :?: 是啊,最早遇到的时候偶还郁闷来着 明白了后更郁闷了...因为老样式都是高优先级写法...
  17. Reply葉子
    :lol: 飞鱼怎么补来解答 ;)
    • Reply飞鱼
      @葉子, 这个问题 太复杂·· :(
      • ReplyBigCat
        @飞鱼, :roll: 站大了什么CSS都有...
    • Reply葉子
      @葉子, 我怎么觉得我原来有留言在这里的,应该是左边左边
  18. Reply葉子
    :( 葉子只是猜谜来的
  19. Replysino
    #oo #xx {float:right} div#oo div{float:left} 这个应该是#oo #xx优先级高于div#oo div 所以不都是偏左... 把两个的float调换一下就能保持偏左了...
  20. Replywyysf
    第三个应该是向右吧~

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>