5.5-css样式权重（学习笔记）

你必须懂的css样式权重和优先级

权重

1，决定 css被浏览器怎么 解析到生效
2，决定样式的生效
3，选择器有各自的权重，最终加权计算
4，权重高者生效

口诀：
行内+1000，id+100，属性、伪类+10，元素、伪元素+1，通配符*+0

！important（提升样式到最高优先级）（不建议使用）
同一属性重复使用时，权重大的生效
如果作用于简写样式属性，那么其子属性都会被作用上！important。
例如：background，其众多子属性也会被作用上，影响性能。

行内、内联和外联的优先级

!important > 行内样式 > 内联样式 and 外联样式

• 内联和外联样式的优先级和加载顺序有关。同级别下，写在后面的的样式会覆盖前面的。
  

样式应用于非目标标签时，（作用于其父级，上上上级时），离目标近的优先
**同等权重下，（选择器）靠近目标的优先 **

**> 1. 常用选择器权重优先级：!important > id > class > tag

2. !important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条写的样式属性所代表的子属性都会被应用上!important。
   例如：background: blue !important;
3. 如果两条样式都使用!important，则权重值高的优先级更高
4. 在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
5. 样式指向同一元素，权重规则生效，权重大的被应用
6. 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
7. 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用**