html中给div设置的属性怎么样才能拿得到_HTML与CSS结合的三种方式:优先级比较...

所谓实践出真知,只有自己动手去做了,才能得到正确的结论。

首先我们看看三种结合方式:

  1. 通过link标签引入外部css文件
  2. 通过style标签
  3. 通过style属性

很长一段时间我受这个一段话影响:在html文件中,代码的执行顺序是从外到内,由上到下执行的。所以一直认为的优先级是这样的:3>2>1。这是当初看视频时理解不到位。发现这个细节还是自己偶然间的测试。不是什么很重要的东西,所以先把结论摆出来。由于我也是个初学者,所以站在初学者的角度,我认为能用视频解决的就不用图片,能用图片解释的我就不用文字描述。

测试过的优先级是:3>2=1。

77c571bfb1489b50cc41dd028513c5da.png

结果图:

81b2ffd0eebd6e2d1806ec7f8300b260.png

这个其他情况我就不在测试了,这里style属性的优先级最高,没什么争议。

接下来就是重点了,分为两种情况来说明问题:

  1. 测试一:style标签在link标签上方
  2. 测试二:style标签在link标签下方
测试一:style标签在link标签上方。不在给测试标签div设置style属性。只比较style标签和外部引入的优先级

262311bf4fa288a175e94761c6962eea.png

900a9f7d824ed89004284f8254c12a25.png
测试一结论:外部引入的优先级高

测试二:style标签在link标签下方。不在给测试标签div设置style属性。只比较style标签和外部引入的优先级

207906a59f9d3e4f71d24ac55ed70d33.png

31a4db7b131bf3a7d90371f365ab668b.png
测试二结论:style标签优先级高

总结:通过测试一和测试二不难知道,style标签和外部引入的css文件是没有绝对的优先级的,决定优先级的是位置先后。从图中可以看出,位置在后的优先级高。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值