大猫の意淫筆記
13
Nov

没听说过的CSS优先级

<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 的优先权图示)分享之 -->

假装异步加载ing

» You can leave a comment, or trackback from your own site.

大战 39 回合 to “没听说过的CSS优先级”

  1. fisio says:

    右手

    Reply

    BigCat:

    @fisio, :twisted: 身边问了一圈,都是左边...

    Reply

  2. yuki says:

    :evil: 我脑疼,这个逻辑问题还是猫猫回答。。 :?: :)

    Reply

    BigCat:

    @yuki, :roll: 同疼ing

    Reply

  3. yuki says:

    PS:今天去了下那个什么戴记好农庄,根本就是革命[痒痒]杀群众的地方。。又贵又难吃。。

    :( :( :( :( :( :( :( :( :( :(

    Reply

    BigCat:

    @yuki, :oops: 而且吃的人又多是不是

    Reply

  4. 明城 says:

    为广大淫民提供 CSS 优先权小抄一份,以后相关的 CSS 心中做个简单的加减法即可

    http://www.gracecode.com/Archive/Display/1523

    Reply

    BigCat:

    @明城, :roll: 抠手指头ing
    原来对那篇文章的理解不够充分....还以为id优先级就比class高...

    Reply

  5. 胡戈戈 says:

    第一个 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

    Reply

    BigCat:

    @[痒痒]戈戈, :oops: 多亏了你呀~来拍拍脑袋

    Reply

  6. blankyao says:

    不懂不懂 :?: :?:

    Reply

    BigCat:

    @blankyao, :( 每天被折磨

    Reply

  7. 阿企 says:

    关键在于如何理解css的顺序,div#xx这样的是相关选择符,#xx是独立的,so最后定义的优先级高。

    Reply

    BigCat:

    @阿企, 在优先级相等的情况下才会后来居上
    div#xx优先级要比#xx高....

    Reply

  8. geuro says:

    长见识了,我一直认为定义越详细优先级越高

    Reply

    BigCat:

    @geuro, :idea: 网站大了后这种问题越来越突出...

    Reply

  9. Elton Disney says:

    跟男人一样偏向于左边~~ :lol:

    Reply

    BigCat:

    @Elton Disney, 兄台难道也左边? ;)

    Reply

    Elton Disney:

    @BigCat, 呀,这都被你发现了~~
    一定要灭口

    Reply

  10. zing says:

    银魂上说,向右偏的是能成大事的人。。。 :P

    Reply

    BigCat:

    @zing, 果如其然
    那人抢了沙发 :lol:

    Reply

  11. 打工皇帝 says:

    呵呵。深刻学习了。

    Reply

    zylew:

    @打工皇帝, 还没被解脱出来?

    Reply

  12. 舞命小丢 says:

    不错的文章啊!很多时候自己也很晕,基本的优先权知道,但是叠加到一起有时还是有点晕!

    Reply

    BigCat:

    @舞命小丢, :roll: 点头... 经常受到高权重的CSS影响....灰常崩溃

    Reply

  13. vampire says:

    这回你火星了。。。gracecode的博客我也经常看

    Reply

    bigCat:

    @vampire, :?: 是啊,最早遇到的时候偶还郁闷来着
    明白了后更郁闷了...因为老样式都是高优先级写法...

    Reply

  14. 葉子 says:

    :lol: 飞鱼怎么补来解答 ;)

    Reply

    飞鱼:

    @葉子, 这个问题 太复杂·· :(

    Reply

    BigCat:

    @飞鱼, :roll: 站大了什么CSS都有...

    Reply

    葉子:

    @葉子, 我怎么觉得我原来有留言在这里的,应该是左边左边

    Reply

  15. 葉子 says:

    :( 葉子只是猜谜来的

    Reply

    bigCat:

    @葉子, - - 这事儿能猜的挖

    Reply

    葉子:

    @bigCat, 先猜迷后答题 :twisted:

    Reply

  16. sino says:

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

    这个应该是#oo #xx优先级高于div#oo div
    所以不都是偏左...
    把两个的float调换一下就能保持偏左了...

    Reply

Leave a Reply

:!: :roll: :o :lol: :P :( 8O :x :oops: :) :?: :idea: :evil: ;) :twisted: XHTML<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>