CSS权重之权重优先
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



共有 0 条评论