CSS的优先级和权重

CSS样式优先级遵循如下：

行内样式  > id选择器 > 类选择器 > 元素选择器

在选择器优先级相同的情况下，遵循就近原则。

页面某元素在多层嵌套情况下，根据权重大小显示，权重越大优先显示。

备注：

!important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；

选择器类别	说明	权重表示	权值表示
行内样式	行内只有一个 style = ""	（1.0.0.0）	1000
id选择器	selector中使用了几个id，即#的个数	（0.1.0.0）	100
类选择器	类,伪类,以及属性的个数 如： .outerClass .buttonClass[type="button"]:hover{} 选择器中有2个类,1个属性,1个伪类	（0.0.1.0）	10
元素选择器	伪元素和标签元素的个数，如： p:first-child 选择器中有一个标签元素p和一个伪元素first-child	（0.0.0.1）	1