用实际演示来证明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>

测试不同元素样式

我们首先加载一下，看看到底是哪个生效，加载之后我们发现是命令一的代码生效了，文字变成了黑色。

然后我们可以把命令一的代码删掉，然后我们会看到是命令五生效了

我们再把命令五的代码删掉，看看下面代码，是命令二，控制ID的生效了

继续删除，发现控制class的代码生效了

最后是H2样式代码生效了

同一个元素的顺序

另外，样式文件是从上至下加载的，所以下面的样式代码要比上面的样式代码的权重要高，来试验下。

上面图中2个css代码都是控制同一个元素，但是下面的代码生效了，我们再来看下响应式设计里面使用的代码吧

可以看到响应式的代码并没有生效，那次我的网站错位其实就是这个问题，那么我们再看下响应式代码放在下面是什么效果。

可以看到，响应式的代码完美的，也就是说如果你做响应式设计的时候，响应式代码最好放在下面，通用CSS样式代码放在上面。比如看看云落的样式代码的排放

扫码订阅，第一时间获得更新

微信扫码二维码，订阅我们网站的动态，另外不定时发送WordPress小技巧，你可以随时退订，欢迎订阅哦~