css选择器权重的计算规则
选择器 | 权重 |
---|---|
!important | Infinity |
行间样式 | 1000 |
id | 100 |
class/属性/伪类 | 10 |
标签/伪元素 | 1 |
通配符 | 0 |
举例:
#app .div1 > span {/*权重计算:100 + 10 + 1 = 111*/
}
.div2 > div > input[tyle="checkbox"] {/*权重计算:10 + 1 + 1 + 10 = 22*/
}
.div2 {/*权重计算:10*/
}
div.div2 {/*权重计算:1 + 10 = 11*/
}
有一个使用权重的小技巧:
当你在开发时,有.div2一个样式需要改,但那个.div2在其他文件中,我们接触不到,或者找到很麻烦,我们就可以在我们编写的css中添加div.div2 {}来修改那个属性值。
.div2 {/*×*/
with: 300px;
}
div.div2 {/*√*/
width: 100%;
}
欢迎批评指正!