CSS的层叠规则和权重计算

zch2846

已于 2023-08-11 09:08:55 修改

阅读量151

点赞数

文章标签： css tensorflow 前端

于 2023-08-09 21:06:08 首次发布

本文链接：https://blog.csdn.net/zch2846/article/details/132197363

版权

CSS的样式层叠规则与权重计算

1.CSS的样式层叠规则

CSS有三大机制：特殊性[冲突]、继承、层叠。而样式最终的呈现则是由层叠机制决定，但层叠与特殊性、继承又有关系。

层叠性是指多种CSS样式的叠加时如何解决样式冲突的问题。

样式不冲突，就不会发生层叠。

在层叠权重相同的情况下，靠下的样式会覆盖靠上的样式

我们定义CSS样式时，会经常出现两个或更多规则应用在同一元素上，
这个时候

如果选择器相同，则执行层叠性。

如果选择器不同，就会出现优先级的问题，会涉及CSS权重计算。

举个例子：


  .box1 {
   background-color: red;
  }

  .box1 {
   background-color: black;
  }

  <div>
    <div class="box1"></div>
  </div>

我们对同一个div设置不同的背景颜色，这个时候因为它们的权重相同不存在优先级问题就会执行层叠性

因为黑色背景在红色背景下面，所以会将红色背景覆盖掉

最终的呈现的效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oKDQLTfD-1691586174875)(C:\Users\28462\Pictures\Saved Pictures\05.png)]$

这时候如果我们将代码更改一下，改为如下所示的形式

  div.box1 {
        /* 权重为0,0,1,1 */
   background-color: red;
  }

  .box1 {
        /* 权重为0,0,1,0 */
   background-color: black;
  }

这时就会因为添加了一个div，改变了权重，因为0011比0010大所以最终效果为红色：
在这里插入图片描述

2.权重的比较规则：

权重由四组数字组成，不会发生进位，比较时从左往右比较，如果某一位一样，就比较下一位。

3.权重的计算规则:

第一等：代表内联样式，如: style=””，权重为1000。
第二等：代表ID选择器，如：#content，权重为0100。
第三等：代表类，伪类和属性选择器，如.content，权重为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权重为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权重为0000。
继承的样式权重为0。

注意: !important，权值为10000

一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important