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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171215A0A7Z300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券