Web前端小白需要知道“CSS优先级”是什么?
我们进行前端开发写HTML+CSS的时候,很多人都知道CSS样式的优先级是就近原则,内联样式>内部样式表>外部样样式表,但如果class、id、tag这些存在的时候呢?
这时优先级id>class>tag,就如下面这段代码:
效果如图1:
图1效果图1
由图一可以看出,背景色是id定义的蓝色。到这感觉就结束了?不,CSS中还有一个破坏这个原则,就是“!important”, “!important”是和属性值写在一起的,如“width:250px !important ;”,那么这里定义的width优先级将比内联样式还高,比如我们将上面代码中div{}中的背景色后加上“!important”变成“background-color:green !important;”,div背景色将变成绿色,如图2:
图1效果图2
那么问题来了,如果将“!important”定义在外部样式表中,它的优先级还是大于内联样式吗?
文章来源:V职圈
领取专属 10元无门槛券
私享最新 技术干货