可能引发CSS文件无效的10种情况

前端开发人员或许都遇到过CSS文件无效的情况，这时我们的页面就只剩下HTML框架，CSS表现已经完全失去，也就是所谓的“页面裸奔”。裸奔的页面一定不是我们想要的，但是CSS文件为什么会失效，也是我们值得去思考的问题。当你弄清楚了这些个问题，就要学会在以后的工作中去避开它，搞定它。

当然，引起CSS文件失效的条件有很多，今天我们就把它们一一列举出来：

1、标签未闭合

未闭合的标签可能是弄死一个页面的最简单的办法，因为它不易查找，也不容易被想到。每一次我出现CSS文件失效的时候我首先想到的不是标签未闭合，因为我们都相信自己不会犯这么低级的错误。但是，当你发现真的是因为标签未闭合而导致CSS文件失效的时候又会懊恼不已。

查找是否是标签未闭合的方法就是一个一个标签去收缩内容，这里就要用到Dreamweaver或者EditPlus的标签关闭的功能了。

2、搞死你你都不知道的embed标签

在HTML4.01之前，embed的标签一直作为一个异类的存在，它很难像其他标签那样遵循CSS文件定义的样式，于是起冲突了，再后来CSS文件就被干死了。

不过值得庆幸的是HTML5已经对embed进行了重新定义。

3、！DOCTYPE声明

如果你的CSS文件无效，可以查一查HTML文档是否有！DOCTYPE声明，如果你发现有，但是你的文件还是不起作用，看看是不是！DOCTYPE声明的版本不对。因为不同的版本所能支持的标签不一样，就好像过度版本（transitional）能支持“algin”，而标准版本（strict）就不支持一样。

4、标签结尾的斜线是否被你遗忘了？

标签结尾的斜线也很有可能是引起CSS失效的原因，因为没有斜线的标签很有可能被认为是未闭合的标签，HTML在从上到下遍历标签的时候找不到对应的闭合标签，于是它糊涂了。

5、中文注释

当你在CSS文件里面使用了中文注释之后，有可能CSS文件就失效了。很难理解这是个什么原因，但不得不告诉你的是，这种情况发生的概率很高，所以建议尽量使用英文或者拼音注释。

6、CSS文件与HTML定义的文字编码不同

如果你定义的CSS文件的文字编码是utf-8，而你的HTML文件的文字编码是gb2312，那么你的CSS>一定是失效的。原因很简单，不能统一编码，浏览器就不能同时解析CSS和HTML文件。

7、不良的标签嵌套

如果标签不能正常的嵌套，那么CSS文件就无法正常的按标签去解析，那么引起CSS失效似乎也是件正常的事情了。

8、一个空格引发的CSS失效

p:first-letter{font-size:300%}

这段代码对p的首字符样式定义在IE6上看是没有效果的，而在p:first-letter和{font-size:300%}之间加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FireFox中，加不加空格都可以正常处理。

更详细的内容请看我爱猫猫技术博客的另一篇文章《一个空格引发的CSS失效BUG》。

9、字符的中英文写法

CSS中的所有字符都应该是英文字符，中文字符是不起效果的，如果你使用的是中文字符那么CSS文件一定是失效的。

10、网络延时

我们这里要说的CSS文件失效就不是CSS文件有错误，而是因为网络延时，导致CSS文件没有被下载，那么在CSS文件完全被下载之前，你的页面都处于裸奔状态的，不过一旦你的CSS文件被下载之后，这个情况就会消失。

其实CSS文件失效的原因多半是我们不够细致，如果我们能够细致一点的去写我们的代码，这些问题都是很容易去解

文章转载自我爱猫猫技术博客。

文章转载自我爱猫猫技术博客。