美文网首页
面试题之CSS选择器权重计算

面试题之CSS选择器权重计算

作者: 杭州程序员小陈 | 来源:发表于2021-06-23 09:28 被阅读0次

选中且设置!important的 > 权重高的 > 权重相同位置靠后的 > 来自继承的
如果两组选择器都定位到同一元素,且对同一属性设置不同的样式,则需要分别计算两组选择器的权重来确定优先级。一个选择器的优先级可以说是由四个部分计算得分,比较时按位比较。
千位: 如果声明在 style 的属性则该位得一分。
百位: 选择器中包含ID选择器则该位得一分。
十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位:选择器中包含标签选择器、伪元素选择器则该位得一分。
比如 #header p.content.active 得分为 0121。 .header p.active::before 的权重是 0022。前者权重大于后者。

相关文章

网友评论

      本文标题:面试题之CSS选择器权重计算

      本文链接:https://www.haomeiwen.com/subject/vgnvyltx.html