一次了解css选择器的优先级

tech2022-08-18  128

css选择器的优先级

CSS选择器优先级的确定主要是通过以下判断,在级联中根据属性以及选择器的权重值以及就近原则判断,具体优先级如下: 优先级最高:!important

属性中使用!important修饰,其优先级最高,但是尽量不要使用,使用其会改变级联方式,造成后期样式不好更改

优先级低于!important : 选择器权重值

行内样式,style属性内的特性值1000 id选择器特性值100 类选择器、伪类选择器、属性选择器特性值10 标签选择器、伪元素选择器特性值1

根据给定的权重值可以算出选择器的权重值,例如: div>.one:first-child::after{} 其权重值为22

具体分析:div标签选择器 =1 .one类选择器 = 10 :first-child 伪类选择器= 10 ::after伪元素选择器 = 1

如果选择器的权重值相同,则根据就近原则来进行判断选择器的优先级的高低

最新回复(0)