CSS优先级问题

版权声明：Myfour的个人笔记 转载请声明来源 https://blog.csdn.net/sinat_36663351/article/details/83620679

CSS优先级

级联将结合重要性、具体性（或称为特殊性：Specificity）以及出现的顺序来决定每一种样式属性的权重， 这个权重将会用来决定浏览器将会采用哪一种样式属性，权重高的则优先使用（具有更高的作用优先级）。

CSS优先级（权重）计算

1. 对于一个给定的样式属性，例如color，先找出应用到某一个指定元素的所有CSS选择器（Selector）

2. 根据声明的重要性和来源对选择器进行排位

3. 根据具体性(Specificity)来对拥有同样重要性的选择器进行排拉

4. 最后，如果重要性、起源和特异度都一样的话，将根据样式属性出现的顺序来排拉，后来者居上，最后一个出现的获胜。

优先级总结

• 不同级别元素
  • 在属性后面使用 !important会覆盖页面内任何位置定义的元素样式。
  • 作为style属性写在元素内的样式（1000）
  • id选择器（100）
  • 类选择器（10）
  • 标签选择器（1）
  • 通配符选择器
  • 浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

• 同级别元素
  • 在后写的css会覆盖前面的