为什么CSS文件中的第一个选择器会被浏览器忽略？

Question

今天我已经为这个问题战斗了几个小时，以为我会分享这个问题和解决方案。该解决方案可以帮助进行一些搜索：

• 为什么浏览器会忽略我CSS文件中的第一个选择器？
• 为什么CSS文件的第一行被浏览器忽略？
• 为什么浏览器会忽略通用选择器？

我不相信我曾接触过Web项目的CSS，但是我一直在进行一些更新，并更改了一些配置。突然之间，样式变了。通过浏览器中的检查器，我发现未应用我的CSS重置。

我的CSS文件开头：

* {box-sizing:border-box;font-size:100%;line-height:1.5em;font-family:'Open Sans', sans-serif;vertical-align:baseline;word-wrap:break-word;word-break:break-word;margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}

我已经发现不是通用选择器被忽略了……因为如果我在其上面添加一行html {};，则通用选择器再次变为活动状态。

我认为这可能是被忽略的第一行...所以我将html {};更改为带注释的行...，然后下一行的第一个选择器不再起作用。

Answer 1

以某种方式保存了以字节顺序标记开头的CSS文件。

这在Visual Studio Code或vim中不可见，但是在Chrome的检查器中却很明显：

作为第一行第一个字符的红点是字节顺序标记。在检查器中对其进行编辑解决了该问题（针对该负载实例）。

我不确定它是如何隐藏到一个文件中的，但是用vim删除它很简单：

• 在vim中打开文件：vim <filename>
• 使用:set nobomb删除物料清单>
• 保存并退出：:w:q

希望这可以帮助其他人节省一些时间！

注意：文件的提供方式可能是问题所在。它是Drupal使用print file_get_contents();输出的，并且可能在BOM表之前插入了额外的换行符。也许如果BOM表实际上是第一个字符，那还好吗？