Home CSS中选择器的优先级
Post
Cancel

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

This post is licensed under CC BY 4.0 by the author.

文档站点生成工具

Github里的Collection

Comments powered by Disqus.