从选择器的角度分4个等级 0.0.0.0
| 选择器 | 例子 | 权重 |
|---|---|---|
| html内嵌样式 | style="color:red" | 1.0.0.0 |
| id选择器 | #box{ color:red } | 0.1.0.0 |
| class选择器 | .box{ color:red } | 0.0.1.0 |
| 元素和其他高级选择器 | div{ color:red } p:first-child{...} ...... |
0.0.0.1 |
选择器约详细权重累计
#box li{ color:red } 0.1.0.1
#box .item a{ color:red } 0.1.1.1
!important关键词高于内嵌style样式
html:<p sytle="color:yollow">你好</p>
css:p{ color:red!important; }(生效)
当权重分数相同时
1.按顺序
.item{color:red}
.item{color:green}(生效)
2.按来源权重顺序
- 读者的重要声明
- 创作者的重要声明
- 创作者的正常声明
- 读者的正常声明
- 用户代理声明
解析:
创作者样式: 就是开发者们写的官方样式
读者样式:通过浏览器接口读者自定义的样式
用户代理样式:浏览器自带的默认样式
