尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    精解CSS样式优先权的计算方法

    作者:redroom  来源:redroom  发表时间:2009-8-16 11:21:55  点击:3342

    每个ID选择符(#someid),加 0,1,0,0。
    每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
    每个元素或伪元素(:firstchild)等,加0,0,0,1
    其他选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。
    按这些规则将数字串逐位相加,就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。
    即:符合 行内样式 > ID样式 > 类别样式 > 标记样式

    各类选择器的权重计算:
    h1 {color: red;}
    /* 只有一个普通元素加成,结果是 0,0,0,1 */
    body h1 {color: green;}
    /* 两个普通元素加成,结果是 0,0,0,2 */
    ——后者胜出
    h2.grape {color: purple;}
    /* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/
    h2 {color: silver;}
    /*一个普通元素,结果是 0,0,0,1 */
    ——前者胜出
    html > body table tr[id=”totals”] td ul > li {color: maroon;}
    /* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */
    li#answer {color: navy;}
    /* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */
    ——后者胜出

    一些其他的规则:
    1 文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style=”color: red”>blah</div>的样式,而外部定义指经由<link>或<style>标签定义的规则。
    2 有!important声明的规则高于一切。
    3 假如!important声明冲突,则比较优先权。
    4 假如优先权一样,则按照在源码中出现的顺序决定,后来者居上。
    5 由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
    6 关于经由@import载入的外部样式,由于@import必须出现在所有其他规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
    7 这里需要提一下IE,IE是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其他规则定义之前的,这可能会引发一些误会。

     

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗