CSS 优先级

2022年7月13日大约 1 分钟

样式类型优先级

优先级递减顺序:

  1. 行内样式:style=""
  2. 内联样式与外联优先级相同,遵循后面覆盖前面原则:在线示例open in new window
  • 内联样式:<style></style>
  • 外联样式:<link> 或 @import 引入(@import 不建议使用)

选择器类型优先级

优先级递减顺序:

  1. ID 选择器(#example
  2. 类(.example)、属性([type="radio"])、伪类(:hover)选择器
  3. 标签(h1)、伪元素(::before)选择器
  4. 通配符(*)、关系选择器(有相邻兄弟、子类、通用兄弟、后代、列合并选择器+open in new window, >open in new window, ~open in new window, ''open in new window, ||open in new window)、反选伪类(:not()open in new window:not() 内部声明的选择器会影响优先级)

权重计算规则

  1. 最高优先级 !important
  2. 1,0,0,0 行内样式
  3. 0,1,0,0 ID 选择器
  4. 0,0,1,0 类、属性、伪类选择器
  5. 0,0,0,1 标签、伪元素选择器
  6. 0,0,0,0 通配符、子类、兄弟选择器
  7. 继承的样式没有权值

权重的进制是 256 进制,越具体权重越高,后面覆盖前面。!important最高,但尽量少用,避免样式优先级内卷 🐶