再学CSS优先级

2020-08-03T23:32:28

层叠、优先级和继承

层叠

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

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

选择器优先级的顺序:

  • 如果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去改变优先级

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »