为什么Atom无法读取CSS文件最开头的代码段，但后续代码均正常生效？

问题根因 #

这类「CSS文件第一条规则无论是什么都失效，后续规则正常」的问题，90%以上是CSS文件开头存在不可见的隐形特殊字符导致的，完全符合描述的特征。
这类隐形字符通常是UTF-8 BOM头、零宽空格、全角空白符，大多来自跨编辑器复制代码、编码错误的文件保存操作，浏览器解析CSS时会把这些字符判定为无效语法，直接让紧跟其后的第一条CSS规则失效，不会影响后面的规则。

解决步骤 #

• 第一步：打开本地的style/design.css文件，将光标移到文件的最开头位置，按3-5次退格/删除键，清空开头看不见的内容后保存文件。
• 第二步：按下Ctrl+F5强制刷新浏览器（或者打开浏览器开发者工具，勾选「网络」选项卡下的「禁用缓存」后刷新），确认样式生效。
• 若上述操作无效，可直接全选整个CSS文件的所有内容，复制粘贴到新建的纯文本文件中，重新命名为design.css替换原有文件，再刷新验证即可。

补充验证方式 #

按F12打开浏览器开发者工具，切换到「元素」选项卡，点击失效的#tribute-info元素，查看右侧「样式」面板里对应的规则有没有被划掉、或者提示语法错误，就能确认是否是隐形字符导致的解析失败。

内容的提问来源于stack exchange，提问作者Matthew Rahim