zoukankan      html  css  js  c++  java
  • CSS样式表的权限和级别

    CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。
    Specificity 具体的计算规则:
    元素的 style 样式属性,加 1,0,0,0。
    每个 ID 选择符(#id),加 0,1,0,0。
    每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0,0,1,0。
    每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。
    其他选择符(例 全局选择符 *,子选择符 >),加 0,0,0,0。
    最后逐位相加数字串,得到最终的 Specificity 值,按照从左到右的顺序逐位比较。
    除了 Specificity 还有一些其他规则:
    !important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
    如果优先权一样,则按源码中“后来者居上”的原则。
    由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。
    范例分析:

    h1 {color: red;}
    /* 只有一个普通元素加成,结果是 0,0,0,1 */
    body h1
    {color: green;}
    /* 两个普通元素加成,结果是 0,0,0,2 */
    /*0,0,0,1 小于 0,0,0,2 ,后者胜出*/
    h2.grape
    {color: purple;}
    /* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/
    h2
    {color: silver;}
    /*一个普通元素,结果是 0,0,0,1 */
    /*0,0,1,1 大于 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 */
    /*0,0,1,7 小于 0,1,0,1,后者胜出*/

    --引自http://www.cnblogs.com/Hotcocoa/articles/2104147.html

  • 相关阅读:
    cnblog项目--20190309
    django js引入失效问题
    Python老男孩 day16 函数(六) 匿名函数
    Python老男孩 day16 函数(五) 函数的作用域
    Python老男孩 day15 函数(四) 递归
    Python老男孩 day15 函数(三) 前向引用之'函数即变量'
    Python老男孩 day15 函数(二) 局部变量与全局变量
    Python老男孩 day14 函数(一)
    Python老男孩 day14 字符串格式化
    Python老男孩 day14 集合
  • 原文地址:https://www.cnblogs.com/mybest/p/2366445.html
Copyright © 2011-2022 走看看