前端基础-CSS样式的优先级
样式的优先级（了解）
1.强制优先级（important）
语法：样式属性:值 !important;
| 示意图 |
|---|
注意：只针对当前这一条css属性
2.选择器优先级
伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承
| 示意图 |
|---|
3.伪对象选择器的优先级（了解）
首字符>首行
| 示意图 |
|---|
4.样式分类优先级
行内样式>内部样式/外部样式
| 示意图1 |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nNyfW1g-1585552032717)(img/1536564263129.png)] |
| 示意图2 |
|---|
总结：
1.样式分类中：行内样式>内部/外部，内部样式和外部样式没有权重之分，关键是看他们的加载顺序，后面的会覆盖前面的
2.伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配
3.容易被覆盖的选择器，应该写在前面，以便于后面的选择器覆盖它
5.样式叠加（权重）
!important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)
| 示意图 |
|---|
总结：掌握一个点：人多力量大 .class<.class标签
继承来的样式不计算权重，也就是说关键看是不是直接修饰的目标标签
权重累计到10，不会往前进一位
| 选择器 | 权重 |
|---|---|
| 继承或者* 的贡献值 | 0,0,0,0 |
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | 无穷大 |
总结：
1.比较权重的前提是准确选择到元素，而不是继承来的样式
2.每一级满10也不会往前进1，等级是非常森严的