0%

CSS中选择器的优先级

CSS选择器很灵活,弄不懂它的优先级可能会被坑的很惨。

CSS选择器的优先级官方的说法应该叫特殊性(Specificity),特殊性越高,自然优先级越高。下面是特殊性说明:

  1. !important 特殊性最高,详情访问重要性
  2. 对于内联样式,加1000
  3. 对于选中器中给定的ID属性值,加0100
  4. 对于选择器中给定的类属性值,属性选择或伪类,加0010
  5. 对于选择器中给定的元素选择器和伪元素,加0001
  6. 结合符和通配符选择器对特殊性没有任何贡献,加0000

用图片表示就是这样的:

css specificity

或者这样的:

css selector priority

再补充一个实际的计算例子:

CSS selector

或者这个例子:

css-selector-example

欢迎到微信里去当吃瓜群众