css权重

css权重

1. !important (infinity)
2. 内联样式 (1000)
3. id (100)
4. class | 伪类 | 属性 (10)
5. 标签 | 伪元素 (1)
6. 通配符 0

<!-- 页面结构 -->
  <div class="box"></div>

这一段代码显示背景为pink的div 权重1+10>10

	div.box{
	   	width: 100px;
	   	height: 100px;
	   	background-color: pink;      
	}
	.box{
	   	width: 100px;
	   	height: 100px;
	   	background-color: #bfc;
	}

值得一提的是!important的权重为无穷大,但计算机中数值的表示是有上限的所以infinity+1>infinty,即这一段代码的背景色依然为pink

    div.box{
      width: 100px;
      height: 100px;
      background-color: pink !important;      
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: #bfc !important;
    }

若权重相等，则以后出现的为准

计算权重时同行选择器权重进行相加,css权重进制为256进制所以11个标签选择器的权重相加是没有一个class选择器大的