CSS权重

最新推荐文章于 2024-06-11 00:00:00 发布

超级冲天猪

最新推荐文章于 2024-06-11 00:00:00 发布

阅读量4.6k

点赞数 5

分类专栏： CSS 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_51207602/article/details/122792116

版权

CSS权重

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果两个选择器同时作用到一个元素上，权重高者生效。
权重记忆口诀：
1.从0开始，一个行内样式+1000
2.一个id选择器+100
3.一个属性选择器、class或者伪类+10
4.一个元素选择器，或者伪元素+1，通配符+0。
样式重复多写情况:在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的，在开发中基本不会使用。

<style>
        .box {
   
          background: red;
          width: 100px;
          height: 100px;  
        }
        .box {
   
          background: yellow;
          width: 100px;
          height: 100px;  
        }
      </style>
    </head>
    <body>
      <div class="box">1</div>
    </body>

在这里插入图片描述
不同的权重，权重值高则生效

<style>
			/* 权重值：1 */
			div{
   
				width: 100px;
				height: 100px;
				background-c

最低0.47元/天解锁文章

超级冲天猪

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS权重

CSS权重权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果两个选择器同时作用到一个元素上，权重高者生效。权重记忆口诀：1.从0开始，一个行内样式+10002.一个id选择器+1003.一个属性选择器、class或者伪类+104.一个元素选择
复制链接

扫一扫

专栏目录