没听说过的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. PS:今天去了下那个什么戴记好农庄,根本就是革命[痒痒]杀群众的地方。。又贵又难吃。。

    🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁 🙁

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

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

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

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

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

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

胡戈戈进行回复 取消回复

您的电子邮箱地址不会被公开。