CSS权重之权重优先

怡然一记 • 2022-10-15 • 前端开发, 学习笔记 • 177 阅读

CSS权重之权重优先

在CSS中又一个非常重要的概念，叫做权重及权重优先：

在选择器的学习中我们知道有:

  • 通配符选择器
* {
    style样式
}
  • 标签选择器
div {
	widht: 100px
}
  • 类选择器
.box {
	widht: 200px
}
  • ID选择器
#name{
	widht: 300px
}

在实际案例中我们做一个这样的样式：

<head>
    <style>
        #name {
            height: 100px
            width: 100px
            background-color: blue;
        }
        .box {
            height: 100px
            width: 100px
            background-color: red;
        }
        div {
            height: 100px
            width: 100px
            background-color: green;
        }
        * {
            height: 100px
            width: 100px
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box" id="name" style:"height: 100px; widht: 100px color: #000">
        
    </div>
</body>

我们发现这段代码中都是对div这个盒子进行设置样式的，但是我们知道当样式冲突时，他会按照就近原则对齐样式进行设置，但是我们实际运行的却是，这个代码块：

style:"height: 100px; widht: 100px color: #000"

这是因为不同的选择方法有着不同的权重，而权重的计算方式是：

选择方式 权重计算公式
*通配符和继承 (0,0,0,0)
标签选择器 (0,0,0,1)
类选择器 (0,0,1,0)
ID选择器 (0,1,0,0)
行内样式设置 (1,0,0,0)

在这里还有一个特殊的存在，就是在属性值后面加 !important:

div{
	height：100px!important;
}
!important 无穷大∞

 

 

怡然一记
CSS权重之权重优先
https://xsunhua.cn/252.html
THE END
分享
二维码
打赏
海报
CSS权重之权重优先
CSS权重之权重优先 在CSS中又一个非常重要的概念，叫做权重及权重优先： 在选择器的学习中我们知道有: 通配符选择器 * { style样式 } 标签选择器 ……
<<上一篇
下一篇>>
文章目录
关闭
目 录