外头站着
13
11 月

没听说过的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 的优先权图示)分享之 –>

yeah, bigCat made it!

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

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

  1. fisio说道:

    右手

  2. yuki说道:

    👿 我脑疼,这个逻辑问题还是猫猫回答。。 ❓ 🙂

  3. yuki说道:

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

    🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁

  4. 明城说道:

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

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

    • BigCat说道:

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

  5. 胡戈戈说道:

    第一个 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)
    第七个我感觉应该这样吧

  6. blankyao说道:

    不懂不懂 ❓ ❓

  7. 阿企说道:

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

  8. geuro说道:

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

  9. Elton Disney说道:

    跟男人一样偏向于左边~~ 😆

  10. zing说道:

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

  11. 打工皇帝说道:

    呵呵。深刻学习了。

  12. 小墨说道:

    不是很懂 🙄 🙄

  13. zylew说道:

    不懂不懂

  14. 舞命小丢说道:

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

  15. vampire说道:

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

    • bigCat说道:

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

  16. 葉子说道:

    😆 飞鱼怎么补来解答 😉

  17. 葉子说道:

    🙁 葉子只是猜谜来的

  18. sino说道:

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

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

  19. wyysf说道:

    第三个应该是向右吧~

Leave a Reply

:!: :roll: :o :lol: :P :( 8O :x :oops: :) :?: :idea: :evil: ;) :twisted: