如果是复合选择器，则会有权重叠加，需要计算权重。

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     ul li {
    12.       color: blue;
    13.     }
    15.     li {
    16.       color: red;
    17.     }
    18.   </style>
    19. </head>
    21. <body>
    22.   <ul>
    23.     <li>权重的叠加</li>
    24.   </ul>
    25. </body>
    27. </html>

    效果图
    image.png
    ul li 的权重：0,0,0,1 + 0,0,0,1 = 0,0,0,2
    li的权重：0,0,0,1
    所以是最终是blue色。

    <!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>Document</title>

  <style>
    ul li {
      color: blue;
    }

    .abc li {
      color: red;
    }
  </style>
</head>

<body>
  <ul class="abc">
    <li>权重的叠加</li>
  </ul>
</body>

</html>

    image.png

    )
    ul li 的权重是：0,0,0,2
    .abc li 的权重是：0,0,1,0 + 0,0,0,1 = 0,0,1,1
    比ul li 的权重大
    所以是red颜色。

    需要注意的是：虽然权重可以叠加，但是永远不会进位。
    例如：
    0,0,0,1+ ,,,, + 0,0,0,1 = 0,0,0,100
    不能进位为0,1,0,0，它还是它，还是0,0,0,100
    还是比0,0,1,0的权重小。