MENU

再学CSS优先级

• August 3, 2020 • Read: 61 • Code

层叠、优先级和继承

层叠

层叠的冲突解决需要考虑三个方面:

  • 样式表的来源
  • 选择器的优先级
  • 源码顺序

层叠的高级流程图.png

选择器优先级的顺序:

  • 如果ID选择器数量一样那么看类选择器数量
  • 如果类选择器数量一样那么看标签选择器数量
  • 如果前面两次比较都一样,那么拥有最多标签选择器数量的优先级最高

选择器优先级的量化计算:

可以将选择器的优先级量化为3位数的数字,例如A选择器有1个ID选择器、2个类选择器、2个标签选择器;B选择器有2个ID选择器、2个类选择器、2个标签选择器。那么A为122,B为222,显然B的优先级大于A。

所以如果要覆盖一个ID选择器的样式必须要使用另一个ID选择器

注:伪类选择器[:hover]和属性选择器[type="input"]的优先级相同

提升选择器的优先级比简单的使用!important更加有效,不推荐简单的使用!important去改变优先级

Leave a Comment

2 Comments
  1. ball ball你,等等你的兄弟吧,别学了别学了,hold不住啊@(泪)

    1. @夜初尘#(献花)知道啦知道啦