当前位置: 首页 > Web前端 > CSS

CSS权重与常用布局(一)

时间:2023-03-30 13:54:33 CSS

CSS选择器类型及权重值通配符选择器权重值为0元素选择器,伪元素(eg::before)权重值为1类型选择器(class)、属性选择器、伪类(:hover)权重值为10ID选择器权重值为100内联样式权重值为1000!important权重值大于前5,可以说是无限提示:!important的权重是最大的,但是可以赋予??更多的权重!important涵盖的内联样式将始终覆盖外部样式表中的任何样式(除了!important)。几个权重值不同的选择器作用于同一个元素,权重值大的css样式规则生效。权重值相同的几个选择器作用于同一个元素,后面出现的选择器的css样式规则才会生效。无论使用多少个低权重选择器,都不会多于一个高权重选择器。如果有!它不起作用,如果有max-height/max-width那么!important不起作用,如果同时有min-height/min-width和max-height/max-width,那么max-height/max-width不起作用:从0开始,一个内联样式+1000,一个id+100,一个属性选择器/类或伪类+10,一个元素名称,或伪元素+1min-height/min-width>max-height/max-width>!important>内联样式>ID选择器>类选择器、属性选择器、伪元素和伪类选择器>元素选择器>通用选择器权重计算方法divph3--->0,0,0,3所以此时h3标签的权重值为3,因为div,p,h3都是标签选择器(权重值为1)

xxxx

#par.subh3--->0,1,1,1此时h3标签的权重值为111=100+10+1(以此类推)

xxxx

需要注意的是前面说了,数字不带:0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0,所以不会出现10个div能赶上一个类选择器的情况。实战例题(某厂前端工程师笔试题)基于以下HTML结构和CSS样式。Dijkstra文本的颜色是什么?
  • MartinFowler
  • Dijkstraul#relatedspan{color:red;}#favorite.highlight{color:orange;}.highlight{color:black;}计算权重:(1)ul#relatedspan--->0,0,0,1+0,1,0,0+0,0,0,1=0,1,0,2--->102红色(2)#favorite.highlight--->0,1,0,0+0,0,1,0=0,1,1,0--->110橙色(最大重量)(3).highlight--->0,0,1,0=10黑色因为110>102>10所以Dijkstra文本显示橙色