css系列,选择器权重计算方式

时间:2022-10-20 03:59:21

CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器),

属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等。

在CSS中,权重决定了哪些CSS规则生效,浏览器按如下规则进行CSS权重计算

  • 1000:内联样式

  • 0100:ID选择器

  • 0010:类,伪类,属性选择器

  • 0001:元素,伪元素,通配符,子选择器,相邻选择器等

  • 无:继承样式

​浏览器通过对元素上的CSS规则进行权重计算,权重高的规则将生效,如果权重相同则最后的规则生效,

而使用的important的规则将具备最高权重,如果多条规则有important,同样是最后的规则生效。