css选择器权重计算技巧

1、选择器的权重大小

!important > 行内 > id > class > 标签 > *(通配)

2、如何计算

!important：无穷大
行内：1000
id：100
class|属性|伪类：10
标签：1
*(通配)：0

例子

css

// class + 标签 = 11
.g-container div { 
    background:red; 
}    
//  标签+ id = 101 
div #gpic {
   background:blue; 
} 

html

<div class = 'g-container'>
      <div class = 'g-pic' id = 'gpic'>文字内容</div>
</div>

显示的背景色为蓝色

选择器相同的情况下，后者覆盖前者