CSS 权重（样式总是被覆盖, 你知道原理么？）

最新推荐文章于 2022-04-18 23:39:00 发布

「已注销」

最新推荐文章于 2022-04-18 23:39:00 发布

阅读量1.4k

点赞数 6

分类专栏： # H5C3 文章标签： html5 css3

本文链接：https://blog.csdn.net/Ares5kong/article/details/115400448

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

结论

1.每个选择器有自己的权重得分

2.不同的选择器设置的样式属性不同时, 不会发生覆盖问题, 最后显示时所有样式会合并

3.不同的选择器设置的样式属性相同时，权重大的样式会被使用，当权重也相同时，按样式的书写顺序进行覆盖，后面的样式会覆盖前面

4.当使用复合选择器时, 总权重为各个基础选择器的累加得分

选择器样式权重表

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

1. 简单选择器案例

代码：

<!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被覆盖

2. 复合型选择器的案例

代码：

<!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>

运行：

运行效果图