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


已发布

分类

来自

标签:

评论

《“没听说过的CSS优先级”》 有 40 条评论

    1. BigCat 的头像

      @fisio, 😈 身边问了一圈,都是左边…

  1. yuki 的头像
    yuki

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

    1. BigCat 的头像

      @yuki, 🙄 同疼ing

  2. yuki 的头像
    yuki

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

    🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁

    1. BigCat 的头像

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

  3. 明城 的头像

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

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

    1. BigCat 的头像

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

  4. 胡戈戈 的头像

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

    1. 胡戈戈 的头像

      第七个现在修正为0,1,1,1(won) 0,1,1,0

      1. BigCat 的头像

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

  5. blankyao 的头像

    不懂不懂 ❓ ❓

    1. BigCat 的头像

      @blankyao, 🙁 每天被折磨

  6. 阿企 的头像

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

    1. BigCat 的头像

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

  7. geuro 的头像

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

    1. BigCat 的头像

      @geuro, 💡 网站大了后这种问题越来越突出…

  8. Elton Disney 的头像

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

    1. BigCat 的头像

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

      1. Elton Disney 的头像

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

  9. zing 的头像

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

    1. BigCat 的头像

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

  10. 打工皇帝 的头像

    呵呵。深刻学习了。

    1. zylew 的头像

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

  11. 小墨 的头像

    不是很懂 🙄 🙄

  12. zylew 的头像

    不懂不懂

  13. 舞命小丢 的头像

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

    1. BigCat 的头像

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

  14. vampire 的头像
    vampire

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

    1. bigCat 的头像

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

  15. 葉子 的头像

    😆 飞鱼怎么补来解答 😉

    1. 飞鱼 的头像

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

      1. BigCat 的头像

        @飞鱼, 🙄 站大了什么CSS都有…

    2. 葉子 的头像

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

  16. 葉子 的头像

    🙁 葉子只是猜谜来的

    1. bigCat 的头像

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

      1. 葉子 的头像

        @bigCat, 先猜迷后答题 😈

  17. sino 的头像
    sino

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

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

  18. wyysf 的头像
    wyysf

    第三个应该是向右吧~

回复 BigCat 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注