选择器与伪元素的权重情况:高权重的选择会覆盖低权重的展示样式
选择器 | 表达式或示例 | 说明 | 权重 |
行内选择器 | style="" | 1000 | |
id选择器 | #aaa | 100 | |
类选择器 | .aaa | 10 | |
标签选择器 | h1 | 元素的tagname | 1 |
属性选择器 | img[alt]、div[class^='pus'] | 10 | |
相邻选择器 | selecter+selecter | 拆分成两个选择器在计算 | |
兄长选择器 | selecter ~ selecter | 拆分成两个选择器在计算 | |
后代选择器 | selecter selecter | 拆分成两个选择器在计算 | |
通配符选择器 | * | 0 | |
各种伪类选择器 | 如:link 、:visited 、:hover等 | 10 | |
各种伪元素 | 如::first-child 、::after 、 ::before等 | 1 |
!important
!important允许开发人员强制应用某样式。用法卸载该样式的某属性值后,结束分号前,以便强制应用该样式
div{
backgroud-color: red !important;
}