css的权重和层叠关系

最新推荐文章于 2023-01-08 21:13:45 发布

木木林_

最新推荐文章于 2023-01-08 21:13:45 发布

阅读量308

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_44812835/article/details/108445729

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.介绍

在刚开始学习前端的时候，写样式时总是时不时的会遇到样式失效，可能操作了一些什么就有可以显示。这些现象可能都是css优先级的问题

2.我们先大致列举一下css的权重

1、 !import 规则的权重最大
2、行内样式，权重会加1000
2、id选择器，权重会加100
4、类选择器、属性选择器、伪类选择器，权重会加10
5、标签选择器，权重会加1

1、对于相同的样式属性 组合起来权值大的优先，如果权重一样，那么会根据先后顺序，后面的覆盖前面的
2、对于不同的样式属性不管权重、先后顺序 总是会合并在一起 (也就是相当于多了一个样式)

1. 那我们通过代码实例来简单演示一下单个的选择器

  <style>
   /* 1、首先看看他们单独的权重 */
  div{
    width: 100px;
    height: 100px;
    background-color: red; //红色背景
   }
  </style>
 <body>
  <div class="a" id="a">
  </div>
 </body>

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

1)接下来添加一个类选择器写在下面

div{
    width: 100px;
    height: 100px;
    background-color: red!important;
   }
.a{
   background-color: green;
  }

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

2)再加一个id选择器的样式

div{
    width: 100px;
    height: 100px;
    background-color: red;
   }
   .a{
    background-color: green;
   }
   #a{
    background-color: blue;
   }

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

3)其他不变，再加一个行内样式

<div style="background-color:yellow" class="a" id="a">  
</div>

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

4)其他不变给div标签选择器下的背景颜色加上!import

div{
    width: 100px;
    height: 100px;
    background-color: red!important;
 }

效果又变为红色在这里插入图片描述

2.接下来看看组合的选择器的权重理解一下权重时可以叠加的

html结构不变  
   .a{
    width: 100px;
    height: 100px;
    background-color: green;
   }
   .a{ 
    background-color: red;
   }

1)此时两个权重都为10，权重相同时，后面的覆盖前面的相同属性，此时：

在这里插入图片描述

2)但是如果给上面的加一个标签选择器那么权重将变为11

/* 权重变为11 */
   div.a{
    width: 100px;
    height: 100px;
    background-color: green;
   }
   /* 权重为10 */
   .a{ 
    background-color: red;
   }

此时
在这里插入图片描述

3.对于样式属性不同时就不考虑权重，就是单纯的增加样式

  #a{
    width: 100px;
    height: 100px;
    background-color: red;
   }
   .a{
    border-radius: 20px;
   }

效果为在这里插入图片描述

如有错误请及时指出及时修改避免误导同学谢谢大家

木木林_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css的权重和层叠关系

在刚开始学习前端的时候，写样式时总是时不时的会遇到样式失效，可能操作了一些什么就有可以显示。这些现象可能都是css优先级的问题我们先大致列举一下css的权重1、 !import 规则的权重最大2、行内样式，权重会加10002、id选择器，权重会加1004、类选择器、属性选择器、伪类选择器，权重会加105、标签选择器，权重会加11、对于相同的样式属性组合起来权值大的优先，如果权重一样，那么会根据先后顺序，后面的覆盖前面的2、对于不同的样式属性不管权重、先后顺序总是会合并在一起 (.
复制链接

扫一扫