css的优先级和权重

之前写页面样式时，有时会遇到用多条样式定义规则对同一个元素进行样式设置的时候，当时想到的就是按css选择器的优先级来搞定这个问题，说实话当时也就只记得内嵌样式 > id > class > 标签这样简单的规则，虽然基本可以搞定需求，也自以为然的就是这个样子了，直到前两天有个面试问到了这个问题，我也是按自以为的这个简单规则进行了描述，当问到我是否对“权重”有所了解时，恕我直言，当时就懵了，“权重”是什么鬼，没听过啊，好尴尬....(恕我学习时不太仔细，同仁勿喷哈)，作为一名出色的前端工程师，前端的东西怎么还可能有没听过的，在这儿不说面试结果咋样了哈，回来我就发奋图强了，各种查资料终于了解“权重”是个什么东西，顿时对css选择器优先级的由来有了深一层的认识，下面是我的一些总结，记录一下，加深理解：

1. 权重概念：

　　权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。

　　权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。

2.css权重的理解：

　　每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；

　　css通过css选择器的权重占比，来计算css选择规则的总权值，从而确定定义样式规则的优先级次序；

从“css权重的理解”中得知，原来所谓为的 css选择规则的优先级是按照 css选择器的权值的比较来确定的（可能光看这句还是一头雾水的，不急，看完我接下来介绍估计你马上会有豁然开朗的感觉，但，请先记住这句话）；

3.css优先级规则：

　　　1.css选择规则的权值不同时，权值高的优先；

　　　2.css选择规则的权值相同时，后定义的规则优先；

　　　3. css属性后面加 !important 时，无条件绝对优先；

4. 权值的计算：

　　网上很容易找到这张图，他描述了css选择器的权值等级划分：

　　权值等级划分，一般来说是划分4个等级：

　　　　第一等级：代表内联样式，如 style=""，权值为 1,0,0,0；

　　　　第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

　　　　第三等级：代表 calss | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

　　　　第四等级：代表标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

　　　　此外，通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

　　权值计算公式：

　　　　权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；

　　　　【注意哦】，上边权值之间的连接符是 "," 不是 "+" 哦！

　　权值比较规则：

　　　　当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;【为什么这么特别强调呢，因为为在网上查资料的时候，看到好多博客是把这个权重值理解成了所有等级的数字之和了】，说到这里再配合下图大家应该就差不多理解了，

　　总结，这个比较规则就是三点

　　　　1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；

　　　　2.完全相同的话，就采用后者优先原则（也就是样式覆盖）；

　　　　3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；

4. 低等级的选择器，个数再多也不会超过高等级的权值；（进制不是10，也不是 255）

5. 验证权重规则：

　　验证第1点：

　　　　Demo：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 选择器</title>
  <style type="text/css">
    #parent p {
      background-color: red;
    }

    div .a.b.c.d.e.f.g.h.i.j.k p {
      background-color: green;
    }
  </style>
</head>

<body>
  <pre>
    这个比较规则就是三点
    -> 1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
       2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
       3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；
  </pre>
  <div id="parent">
    <div class="a b c d e f g h i j k">
      <p>xxxx</p>
    </div>
  </div>
</body>

</html>

　　　　如果对css权重理解不透彻的话，看到上边的例子，估计会有很大一部分人都会认为最后 p 的背景色是 green; 为什么呢? 因为理解成了错误的权值计算规则

　　　　qz1 = 100 + 1 = 101

　　　　qz2 = 1 + 10*11 + 1 = 112

　　　　qz1 < qz2

　　　　所以第二条样式优先级高，背景色为 green；

　　　　NO,NO,NO....结果却是背景色为 red；如图：

　　　　所以也就印证了，上面所说的权值比较规则 第1点。

　　验证第2点：

　　　　Demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 选择器</title>
  <style type="text/css">
    /*
      1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推，
      2.完全相同的话，就采用 后者优先原则（也就是样式覆盖），
      3.有 !important 时，无条件绝对优先
      如下面的 示例：
    */
      #parent div#child1.c2 {background-color: red;} /* 权值: 0,2,1,1; */
      #parent div#child1.c1 {background-color: green;} /* 权值: 0,2,1,1; */
      /* #parent div#child1.c1.c2 {background-color: pink;}  */  /* 权值: 0,2,2,1; */
      
  </style>
</head>
<body>
  <pre>
    这个比较规则就是三点
        1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
    ->  2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
        3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；
  </pre>
    <div id="parent">
        <div id="child1" class="c1 c2">xxxxxx</div>
    </div>
</html>

　　　　展示效果，如图：

　　　　所以也就印证了，上面所说的权值比较规则 第2点；

　　验证第3点：

　　　　Demo：　　　　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 选择器</title>
  <style type="text/css">
  /*
      1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推，
      2.完全相同的话，就采用 后者优先原则（也就是样式覆盖），
      3.有 !important 时，无条件绝对优先
      如下面的 示例：
    */
      #parent div#child1 { background-color: yellow !important;  } /* !important 无条件绝对优先 */
      #parent div#child1 {background-color: red;} /* 权值: 0,2,0,1; */
      #parent #child1 {background-color: green;} /* 权值: 0,2,0,0; */
  </style>
</head>
<body>
  <pre>
    这个比较规则就是三点
        1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
        2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
    ->  3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；
  </pre>
    <div id="parent">
        <div id="child1" style="background-color:orange;">xxxxxx</div> <!-- 权值：1, 0, 0, 0 -->
        <div id="child2">xxxxxx</div>
    </div>
</html>

　　　　如果没有 !important 的样式规则时，相信大家都知道内联样式的优先级是最高的，背景色为 orange；

　　　　加了 !important 之后，没有任何理由的它的优先级就最高了，背景色为 yellow;

　　　　展示效果, 如图：

　　　　所以也就印证了，上面所说的权值比较规则 第3点；

验证第4点：

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 选择器</title>
  <style type="text/css">
  /*
      1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推，
      2.完全相同的话，就采用 后者优先原则（也就是样式覆盖），
      3.有 !important 时，无条件绝对优先
      4. 低等级的选择器，个数再多也不会超过高等级的权值；（进制 不是10， 也不是 255）
      如下面的 示例：
    */
      /* 权值: 0,1,0,1; */
      div#child {background-color: red;} 
      /* 权值: 0,0,500,1; */
      div.c0.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11.c12.c13.c14.c15.c16.c17.c18.c19.c20.c21.c22.c23.c24.c25.c26.c27.c28.c29.c30.c31.c32.c33.c34.c35.c36.c37.c38.c39.c40.c41.c42.c43.c44.c45.c46.c47.c48.c49.c50.c51.c52.c53.c54.c55.c56.c57.c58.c59.c60.c61.c62.c63.c64.c65.c66.c67.c68.c69.c70.c71.c72.c73.c74.c75.c76.c77.c78.c79.c80.c81.c82.c83.c84.c85.c86.c87.c88.c89.c90.c91.c92.c93.c94.c95.c96.c97.c98.c99.c100.c101.c102.c103.c104.c105.c106.c107.c108.c109.c110.c111.c112.c113.c114.c115.c116.c117.c118.c119.c120.c121.c122.c123.c124.c125.c126.c127.c128.c129.c130.c131.c132.c133.c134.c135.c136.c137.c138.c139.c140.c141.c142.c143.c144.c145.c146.c147.c148.c149.c150.c151.c152.c153.c154.c155.c156.c157.c158.c159.c160.c161.c162.c163.c164.c165.c166.c167.c168.c169.c170.c171.c172.c173.c174.c175.c176.c177.c178.c179.c180.c181.c182.c183.c184.c185.c186.c187.c188.c189.c190.c191.c192.c193.c194.c195.c196.c197.c198.c199.c200.c201.c202.c203.c204.c205.c206.c207.c208.c209.c210.c211.c212.c213.c214.c215.c216.c217.c218.c219.c220.c221.c222.c223.c224.c225.c226.c227.c228.c229.c230.c231.c232.c233.c234.c235.c236.c237.c238.c239.c240.c241.c242.c243.c244.c245.c246.c247.c248.c249.c250.c251.c252.c253.c254.c255.c256.c257.c258.c259.c260.c261.c262.c263.c264.c265.c266.c267.c268.c269.c270.c271.c272.c273.c274.c275.c276.c277.c278.c279.c280.c281.c282.c283.c284.c285.c286.c287.c288.c289.c290.c291.c292.c293.c294.c295.c296.c297.c298.c299.c300.c301.c302.c303.c304.c305.c306.c307.c308.c309.c310.c311.c312.c313.c314.c315.c316.c317.c318.c319.c320.c321.c322.c323.c324.c325.c326.c327.c328.c329.c330.c331.c332.c333.c334.c335.c336.c337.c338.c339.c340.c341.c342.c343.c344.c345.c346.c347.c348.c349.c350.c351.c352.c353.c354.c355.c356.c357.c358.c359.c360.c361.c362.c363.c364.c365.c366.c367.c368.c369.c370.c371.c372.c373.c374.c375.c376.c377.c378.c379.c380.c381.c382.c383.c384.c385.c386.c387.c388.c389.c390.c391.c392.c393.c394.c395.c396.c397.c398.c399.c400.c401.c402.c403.c404.c405.c406.c407.c408.c409.c410.c411.c412.c413.c414.c415.c416.c417.c418.c419.c420.c421.c422.c423.c424.c425.c426.c427.c428.c429.c430.c431.c432.c433.c434.c435.c436.c437.c438.c439.c440.c441.c442.c443.c444.c445.c446.c447.c448.c449.c450.c451.c452.c453.c454.c455.c456.c457.c458.c459.c460.c461.c462.c463.c464.c465.c466.c467.c468.c469.c470.c471.c472.c473.c474.c475.c476.c477.c478.c479.c480.c481.c482.c483.c484.c485.c486.c487.c488.c489.c490.c491.c492.c493.c494.c495.c496.c497.c498.c499 {
        background-color: green;
      } 
  </style>
</head>
<body>
  <pre>
    这个比较规则就是三点
        1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
        2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
        3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；
    ->  4. 低等级的选择器，个数再多也不会超过高等级的权值；（进制 不是10， 也不是 255）
  </pre>
    <div id="parent">
        <div 
          id="child"
          class="c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 c20 c21 c22 c23 c24 c25 c26 c27 c28 c29 c30 c31 c32 c33 c34 c35 c36 c37 c38 c39 c40 c41 c42 c43 c44 c45 c46 c47 c48 c49 c50 c51 c52 c53 c54 c55 c56 c57 c58 c59 c60 c61 c62 c63 c64 c65 c66 c67 c68 c69 c70 c71 c72 c73 c74 c75 c76 c77 c78 c79 c80 c81 c82 c83 c84 c85 c86 c87 c88 c89 c90 c91 c92 c93 c94 c95 c96 c97 c98 c99 c100 c101 c102 c103 c104 c105 c106 c107 c108 c109 c110 c111 c112 c113 c114 c115 c116 c117 c118 c119 c120 c121 c122 c123 c124 c125 c126 c127 c128 c129 c130 c131 c132 c133 c134 c135 c136 c137 c138 c139 c140 c141 c142 c143 c144 c145 c146 c147 c148 c149 c150 c151 c152 c153 c154 c155 c156 c157 c158 c159 c160 c161 c162 c163 c164 c165 c166 c167 c168 c169 c170 c171 c172 c173 c174 c175 c176 c177 c178 c179 c180 c181 c182 c183 c184 c185 c186 c187 c188 c189 c190 c191 c192 c193 c194 c195 c196 c197 c198 c199 c200 c201 c202 c203 c204 c205 c206 c207 c208 c209 c210 c211 c212 c213 c214 c215 c216 c217 c218 c219 c220 c221 c222 c223 c224 c225 c226 c227 c228 c229 c230 c231 c232 c233 c234 c235 c236 c237 c238 c239 c240 c241 c242 c243 c244 c245 c246 c247 c248 c249 c250 c251 c252 c253 c254 c255 c256 c257 c258 c259 c260 c261 c262 c263 c264 c265 c266 c267 c268 c269 c270 c271 c272 c273 c274 c275 c276 c277 c278 c279 c280 c281 c282 c283 c284 c285 c286 c287 c288 c289 c290 c291 c292 c293 c294 c295 c296 c297 c298 c299 c300 c301 c302 c303 c304 c305 c306 c307 c308 c309 c310 c311 c312 c313 c314 c315 c316 c317 c318 c319 c320 c321 c322 c323 c324 c325 c326 c327 c328 c329 c330 c331 c332 c333 c334 c335 c336 c337 c338 c339 c340 c341 c342 c343 c344 c345 c346 c347 c348 c349 c350 c351 c352 c353 c354 c355 c356 c357 c358 c359 c360 c361 c362 c363 c364 c365 c366 c367 c368 c369 c370 c371 c372 c373 c374 c375 c376 c377 c378 c379 c380 c381 c382 c383 c384 c385 c386 c387 c388 c389 c390 c391 c392 c393 c394 c395 c396 c397 c398 c399 c400 c401 c402 c403 c404 c405 c406 c407 c408 c409 c410 c411 c412 c413 c414 c415 c416 c417 c418 c419 c420 c421 c422 c423 c424 c425 c426 c427 c428 c429 c430 c431 c432 c433 c434 c435 c436 c437 c438 c439 c440 c441 c442 c443 c444 c445 c446 c447 c448 c449 c450 c451 c452 c453 c454 c455 c456 c457 c458 c459 c460 c461 c462 c463 c464 c465 c466 c467 c468 c469 c470 c471 c472 c473 c474 c475 c476 c477 c478 c479 c480 c481 c482 c483 c484 c485 c486 c487 c488 c489 c490 c491 c492 c493 c494 c495 c496 c497 c498 c499"
        >xxxxxx</div>
    </div>
</html>

看到网友们对CSS权值的讨论中，好多都认为，css 权值有进制一说，有说是 10 ，有说是 255，特此补充了这个 demo 大家可以自行尝试；

结果如下：

上边的例子，我给div#child 添加了 500个 class, 然后用 div.[500 class] 和 div#child 分别设置背景色，结果 div#child 的颜色依然是红色；

权值比对为：

选择器	div#child	div.[500 class]
权值	0,1,0,1	0,0,500,1

结果： 0,1,0,1 > 0,0,500,1

也就验证了上边说权值比较规则 第4点；

5. 选择器的优先级：

通过上边的分析我们就得出了单个选择器的优先级比较：

　　css属性!important

　　> 内联样式

　　> ID选择器(#id)

　　> 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]

　　> 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)

　　> 通用选择器(*)

　　> 继承的样式

　　关于伪类的部分，这篇文章总结还挺好的（尤其是 :not(选择器) 伪类不参与优先级计算，但:not(选择器) 里边的 “选择器” 是参与优先级计算的这部分），可参考：

　　地址：https://www.cnblogs.com/starof/p/4387525.html

　 简单说一下继承：

　　继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明：

　　　　样式定义：body{ color:red; }

　　　　应用举例代码：<p>CSS的<strong>层叠和继承</strong>深入探讨</p>

　　　　这段代码的应用结果是：“CSS的层叠和继承深入探讨”这段话是红颜色的，“层叠和继承”由于应用了strong元素，所以是粗体。这很符合制作者的意图，也是为什么继承是CSS的一部分的原因。

我去，又两点半拉，我还没娶媳妇，不想死辣么早，就写这些吧，估计大家通篇读下来，应该也明白的差不多了，还有不理解的地方，欢迎留言哈！！爱生活，爱自己，晚安！！

posted @ 2018-03-16 02:39 驸马爷阅读(39440) 评论(5) 编辑收藏举报

刷新页面返回顶部

十步杀一人千里不留行

css的优先级 和 权重

css的优先级和权重