zoukankan      html  css  js  c++  java
  • CSS样式层叠权重值

    CSS样式层叠权重值

    根据CSS规范,具体性越明确的样式规则,权重值越高。计算权重值的依据,并不是许多文章所描述的那样“class是10,标签是1,ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。

    首先来看一个便于记忆的顺序”important>内联 >ID>类 >标签 |伪类|属性选择 >伪对象 >继承 >通配符

    选择器权重值的计算

    A:如果规则是写在标签的style属性中(内联样式),则A=1,否则,A=0. 对于内联样式,由于没有选择器,所以B、C、D的值都为0,即A=1, B=0, C=0, D=0(简写为1,0,0,0,下同)。

    B:计算该选择器中ID的数量。如果有则B=1,没有B=0(例如,#header 这样的选择器,计算为0, 1, 0, 0)。

    C:计算该选择器中伪类及其它属性的数量(包括class、属性选择器等,不包括伪元素)。(例如, .logo[id='site-logo'] 这样的选择器,计算为0, 0, 2, 0)(后面将进一解释为什么会是0,0,2,0)。

    D:计算该选择器中伪元素及标签的数量。(例如,p:first-letter 这样的选择器,计算为0, 0, 0, 2)。

    CSS2规范中给出的一些例子:

    • *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
    • li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
    • li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
    • ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
    • ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
    • h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
    • ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
    • li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
    • #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
    • style=”"          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

    这种说法是错误的:

    根据这样的定义,所以很多文章简单地把规则归纳为:内联样式的权重值是1000,ID选择器的权重值是100,class选择器的权重值是10,标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值,数字越大权重值越高。

    大多数情况下,按照这样的理解得出的结论没有问题,但是遇到下面这样的情况就出现问题了:

    样式一:body header div nav ul li div p a span em {color: red}

    样式二:.count {color: blue}

    按照错误的计算方法,样式一的权重值是11,样式二的权重值是10,如果这两条规则用于同一个元素,则该元素应该是红色。实际结果却是蓝色。

    权重值的比较

    按照四组计算的正确方法,上面例子中的样式一权重值应该是0, 0, 0, 11,样式二的权重值是0, 0, 1, 0。

    根据规范,计算权重值时,A,B,C,D四组值,从左到右,分组比较,如果A相同,比较B,如果B相同,比较C,如果C相同,比较D,如果D相同,后定义的优先。

    样式二和样式一的A、B相同,而样式二的C大于样式一,所以,不管D的值如何,样式二权重值都大于样式一。这就是正确的答案。

    特殊的 !important

    在按照ABCD四组计算比较之外,在定义样式的时候,还可以对某一个属性应用 !important。对于一直从事编程而没做过重构的人,需要特别注意的是这里的“!”与其在编程语言中的意义刚好相反,不是代表“不重要”而是代表“很重要”。

    CSS2规范中规定:!important 用于单独指定某条样式中的单个属性。对于被指定的属性,有 !important 指定的权重值大于所有未用 !important 指定的规则。

    例如:

    样式一: #header nav ul li.current {color: red; font-weight: bold;}

    样式二: li:hover {color: blue !important; font-weight: normal;}

    就整条规则而言,样式一的权重值为 0, 1, 1, 3,而样式二的权重值仅为0, 0, 2, 0。所以应用于相同元素时,应该样式一生效。但是对于color这个属性,由于在样式二中用 !important 做了指定,因此color将应用样式二的规则。而font-weight则按照规定用样式一的规则。

    如果多条规则中都对同一个属性指定了 !important 呢?这时候 !important 的作用相互抵销,依然按照ABCD四组计算比较。

    因此 !important 的作用只有在具有唯一性时才能提现,但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性,所以最好的办法就是:不要使用 !important。

  • 相关阅读:
    cf1100 F. Ivan and Burgers
    cf 1033 D. Divisors
    LeetCode 17. 电话号码的字母组合
    LeetCode 491. 递增的子序列
    LeetCode 459.重复的子字符串
    LeetCode 504. 七进制数
    LeetCode 3.无重复字符的最长子串
    LeetCode 16.06. 最小差
    LeetCode 77. 组合
    LeetCode 611. 有效三角形个数
  • 原文地址:https://www.cnblogs.com/mizzle/p/2804378.html
Copyright © 2011-2022 走看看