为什么浏览器会忽略我的 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 删除 BOM
• 保存并退出：:w:q

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

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