学习前端之CSS权重

学习前端之CSS权重

一般而言，大多工程师对CSS样式优先级的概念，只局限于 !important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符，其实这种方法并不能用来解决所有这样的问题，例如：

<div id = "box" class = "bigbox">
	<div id = "box1" class = "smallbox">
        <div class = "box2">
            我是最里层的div
        </div>
    </div>   
</div>

#box #box1 .box2{
    width:100px;
    height:100px;
    background-color:red;
}
.bigbox .smallbox .box2{
    width:200px;
    height:200px;
    background-color:green;
}
#box .smallbox div{
    width:300px;
    height:300px;
    background-color:blue;
}

在浏览器里显示的是哪一种呢？

答案是第一种，用传统的比较方法，很难准确的得出答案，但用CSS权重可以很快的算出，任何问题都能用其解决

标签名	权重值
!important	infinity正无穷
行间样式	1000
id选择器	100
class选择器、属性选择器(input[type =“text”])、伪类选择器（:hover）	10
标签选择器、伪元素选择器(:after、:before)	1
通配符选择器（*）	0

在计算机中，正无穷+1 > 正无穷

如果权重值一样（优先级一样），会显示后面的，就是先来后到，谁在后面，谁（后面的）覆盖前面的

在权重中，权重值是256进制，从0到255后变成1，这里的1000不是一千，100也不是一百。