html - rails : CSS not showing in inspector and not applying

Question

我遇到了一个奇怪的错误，它经常发生在我身上。

我正在为一个元素做一些 css，在做的过程中，一些 CSS 开始没有被考虑在内。

所有 CSS 文件都工作正常，只是一行或一个类不起作用，也根本没有出现在检查器中(通常当 CSS 不起作用时，类出现但代码不起作用)。

我已经尝试了一切。 - 禁用网络缓存 - 清空我的缓存 - 删除我的 CSS 文件中的所有内容以仅保留这一类(以确保某处没有语法错误) - 更改类的名称以确保它不与任何内容冲突。 - 我还检查了源代码，我确实看到了我的 CSS 行，因此它已正确编译!

当我检查检查器时，这个类只应用了零代码。就像它不存在一样。

最奇怪的是，如果我更改类的名称，它仍然不起作用。但是，如果我将另一个类添加到另一行，它确实有效。 它只是在特定线路上崩溃。我能让它工作的唯一方法是直接在我的 HTML 中添加内联的 CSS。但我不想那样做，那太丑了。

这在我身上发生了很多次，有一段时间有不同的元素。 有时，当我在 2 天后尝试使用完全相同的代码时，它会起作用。有时不是。 我什至拍了一段视频来重现整个错误，因为那太奇怪了，我找不到解决方案。我已经向好的编码 friend 展示了这个错误，他们也不明白......

有人以前有过这个吗？

这是代码，以防万一

  <div class="text-step">
    <%= image_tag "pay_icon.png" , height: 40 %>
    <h3>Pay by card</h3>
    <p>Pay in less than 1 minute</p>
  </div>

  .text-step {
    width: 45vw;
  }

这是检查器中显示的内容:

element.style {
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}

没有“文本步骤”...

编辑:CSS 位于单独的 CSS 文件中。其中包含 100 行 CSS。一切正常，除了我复制的那一行。 这就是为什么我说我试图删除此文件中的所有内容只是为了保留我复制的那个(以检查没有语法错误)。 抱歉，我应该更清楚一些。

已解决:嘿。所以，我解开了这个谜团。这实际上有点疯狂。我的类名和括号之间的空格是一个不间断的空格。当您同时按下 space + alt 时，它会在 mac 上发生。有时我可能会在没有意识到的情况下这样做...在网上的某个地方找到了解决方案，但是如果不了解它几乎是不可能调试的，因为您无法用眼睛分辨出差异!

非常感谢

Answer 1

我在这里根据您提供的信息给出答案，如果提供更多信息，我将进行编辑。

如果您使用粘贴的代码，则它不起作用，因为它是无效的 HTML。为了让它正确呈现，它需要:

<style type="text/css">
      .text-step {
        width: 45vw;
        color: red;
      }
</style>

<div class="text-step">
    <!-- commenting the below since it's not HTML -->
    <!-- <%= image_tag "pay_icon.png" , height: 40 %> -->
    <h3>Pay by card</h3>
    <p>Pay in less than 1 minute</p>
</div>

每个开发人员都知道，机器永远不会出错。如果您认为浏览器在捉弄您，那不是。浏览器是久经考验的，尤其是对于解析 HTML 和 CSS 等简单任务，问题出在您的代码上。

to make sure there is not a syntax error somewhere

当您想测试这种奇怪的行为时，最好的方法是运行“独立”测试。打开 jsBin 或 Codepen 之类的东西，然后添加给您带来麻烦的代码。这样您就可以测试代码本身而无需丢弃其他可能的问题(您的编译器，您正在使用的站点，您的缓存系统，上帝知道还有什么)。