CSS权重的叠加

听海边涛声

已于 2024-06-19 12:42:04 修改

阅读量146

点赞数 10

文章标签： css 前端

于 2024-06-19 12:40:48 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139780904

版权

CSS权重的叠加：如果是复合选择器，则会有权重叠加，需要计算权重，就是把各权重累加。
权重尽管有叠加，但不会有进位。

权重叠加计算举例：

div ul li 选择器叠加后的权重为0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3
.nav ul li 选择器叠加后的权重为0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2
a:hover 选择器叠加后的权重为0,0,0,1 + 0,0,1,0 = 0,0,1,1
.nav a 选择器叠加后的权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1

示例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 复合选择器会有权重叠加的问题 */
    /* ul li选择器器的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
    ul li {
      color: green;
    }

    /* li的权重是0,0,0,1 */
    li {
      color: red;
    }
  </style>
</head>

<body>
  <ul>
    <li>苹果</li>
    <li>西瓜</li>
    <li>荔枝</li>
  </ul>
</body>

</html>

展示效果：
在这里插入图片描述

示例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 复合选择器会有权重叠加的问题 */
    /* ul li选择器器的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
    ul li {
      color: green;
    }

    /* li的权重是0,0,0,1 */
    li {
      color: red;
    }

    /* .nav li选择器的权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
    .nav li {
      color: pink;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>苹果</li>
    <li>西瓜</li>
    <li>荔枝</li>
  </ul>
</body>

</html>