CSS 权重导致的样式覆盖_vue 中css样式权重被覆盖-优快云博客

本文链接：https://blog.youkuaiyun.com/ougaii_/article/details/144872900

结论

每个选择器有自己的权重得分
不同的选择器设置的样式属性不同时, 不会发生覆盖问题, 最后显示时所有样式会合并
不同的选择器设置的样式属性相同时，权重大的样式会被使用，当权重也相同时，按样式的书写顺序进行覆盖，后面的样式会覆盖前面
当使用复合选择器时, 总权重为各个基础选择器的累加得分

选择器样式权重表

选择器	权重得分
行内样式	1000
指定ID	100
类、伪类、后代、子元素	10
元素、伪元素	1
!important	优先级最高

简单选择器案例

代码：


<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS权重（样式总是被覆盖, 你知道原理么？）</title>
  <style>
    #box {
      width: 200px;
      background-color: gray;
    }

    .container {
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div id="box" class="container"></div>
</body>
</html>

运行：

请添加图片描述

从结果看出尽管 .container 的书写顺序在后, 其设置的 background-color 仍会被覆盖

分析：

按照之前的权重表可以算出权重得分 #box=100, .container=10
所以当两个选择器设置的样式相同时, 会以 #box 为准。当设置的属性不同时, 会进行合并。
合并: width, height, 覆盖: .container 的 background-color

复合型选择器的案例

代码：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS权重（样式总是被覆盖, 你知道原理么？）</title>
  <style>
    div .container {
      width: 200px;
      background-color: gray;
    }
    p {
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div>
    <p class="container"></p>
  </div>
</body>
</html>