专注于discuz,uchome,dedecms等各类PHP程序仿站(二次开发和模板制作)。

« »

css选择器的优先级详解

CSS样式定义多了,常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。

  1. 多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低:

                !important的用户样式
          !important的作者样式
          作者样式
          用户样式
          浏览器定义的样式

    用户指的是:网页浏览者;作者指的是:网页制作者!

  2. CSS样式选择器分为4个等级,a、b、c、d,可以以这四种等级为依据确定CSS选择器的优先级。


    1.如果样式是行内样式(通过Style=””定义),那么a=1
    2.b为ID选择器的总数。
    3.c为Class类选择器的数量,连同伪类选择器。
    4.d为类型选择器的数量,连同HTML元素选择器。

    具体特殊性如下表

    选择器

    特殊性(a,b,c,d)

    优先级

    Style=””

    1,0,0,0

    1000

    #wrapper #content {}

    0,2,0,0

    200

    #content .datePosted {}

    0,1,1,0

    110

    div#content {}

    0,1,0,1

    101

    #content p {}

    0,1,0,1

    101

    #content {}

    0,1,0,0

    100

    p.comment .dateposted {}

    0,0,2,1

    21

    div.comment p {}

    0,0,1,2

    12

    .comment p {}

    0,0,1,1

    11

    p.comment {}

    0,0,1,1

    11

    .comment {}

    0,0,1,0

    10

    div p {}

    0,0,0,2

    2

    p {}

    0,0,0,1

    1

    这里还有一种情况: 权重一样时如何处理?

     

  3. CSS样式的层叠原则——谁离我近,谁说了算。

    当权重一样时,会采用“层叠原则” 后定义的会被应用。
    如:p{color:yellow}
            p{color:red}
    作用到这里   <. p >我的什么颜色呢?< /p>
    结果会是red的。

  4. CSS样式的特殊标记——谁有特权,谁说了算。

    如果有人看不顺眼,非得要自己说了算,那可以搞点特权,如下即可
    p {color:blue !important;}
    加上!important;可将自己权重设为最高。

原创文章如转载,请注明:转载自火跃工作室
本文网址:http://www.huoyue.org/css_selector

日志信息 »

该日志于2010-12-21 12:51由 火跃 发表在CSS+HTML分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

没有评论

发表评论 »