• 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

  • 给网站增加一个离线缓存功能

用实际演示来证明CSS代码的执行顺序的以及冲突问题

网络技术 云落 1年前 (2017-11-04) 224次浏览 1个评论
文章目录[隐藏]

我们来讨论下当CSS代码出现冲突的时候,浏览器到底听哪个话的问题

用实际演示来证明CSS代码的执行顺序的以及冲突问题

前言

昨天晚上有个朋友跟我反映一下网站主题有显示,错位的地方,我看了一下也是吃了一惊,然后用浏览器检查了一下样式,发现原来应该是手机页面生成样式却被电脑的样式给覆盖,我看下代码样式,明明已经对屏幕的宽度做了判断可是却没有生效。然后我去看了一下主题的样式代码,把剑代码并没有什么改变?只是将有些代码的顺序变了一下,原本应该放在前面的代码被我放到了后面,结果就导致样式发生了错位。

错误的原因

百度了一下,发现css样式的生效有很多顺序,顺序如下:!important > 内嵌 > id > class > html
举例子,看下面代码,很简单的代码,而且样式有明显的冲突,就好像有几个领导,每个领导都给你下达不同的命令,看看你到底是听哪个命令?

演示代码

我们就用下面这段代码来测试下

<style type="text/css">
#demo{color:#000 !important}/*命令1*/
#demo{color:#fff}/*命令二*/
.classdemo{color:#999}/*命令三*/
h2{color:#eee}/*命令四*/
</style>
<h2 style="color:#888/*命令五*/" id="demo" class="classdemo">我是演示文字</h2>

测试不同元素样式

我们首先加载一下,看看到底是哪个生效,加载之后我们发现是命令一的代码生效了,文字变成了黑色。
用实际演示来证明CSS代码的执行顺序的以及冲突问题
然后我们可以把命令一的代码删掉,然后我们会看到是命令五生效了
用实际演示来证明CSS代码的执行顺序的以及冲突问题
我们再把命令五的代码删掉,看看下面代码,是命令二,控制ID的生效了
用实际演示来证明CSS代码的执行顺序的以及冲突问题
继续删除,发现控制class的代码生效了
用实际演示来证明CSS代码的执行顺序的以及冲突问题
最后是H2样式代码生效了
用实际演示来证明CSS代码的执行顺序的以及冲突问题

我们可以得出结论:!important > 内嵌 > id > class > html

同一个元素的顺序

另外,样式文件是从上至下加载的,所以下面的样式代码要比上面的样式代码的权重要高,来试验下。
用实际演示来证明CSS代码的执行顺序的以及冲突问题
上面图中2个css代码都是控制同一个元素,但是下面的代码生效了,我们再来看下响应式设计里面使用的代码吧
用实际演示来证明CSS代码的执行顺序的以及冲突问题
可以看到响应式的代码并没有生效,那次我的网站错位其实就是这个问题,那么我们再看下响应式代码放在下面是什么效果。
用实际演示来证明CSS代码的执行顺序的以及冲突问题
可以看到,响应式的代码完美的,也就是说如果你做响应式设计的时候,响应式代码最好放在下面,通用CSS样式代码放在上面。比如看看云落的样式代码的排放
用实际演示来证明CSS代码的执行顺序的以及冲突问题


-- 完 --
用实际演示来证明CSS代码的执行顺序的以及冲突问题
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:用实际演示来证明CSS代码的执行顺序的以及冲突问题
喜欢 (4)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 唉,每次看到CSS就头晕! :oops:
    明月学习笔记Blog2017-11-05 22:23 回复 Windows 10 | Firefox浏览器 57.0