Web前端小白需要知道“CSS优先级”是什么？

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职圈