Rails：CSS未在检查器中显示且未应用答案

【问题标题】：Rails: CSS not showing in inspector and not applyingRails：CSS未在检查器中显示且未应用
【发布时间】：2019-10-09 08:56:05
【问题描述】：

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

我正在为一个项目做一些 css，在它的中间，一些 css 刚刚开始没有被考虑到。

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

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

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

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

我经常遇到这种情况，有一段时间有不同的项目。有时当我两天后尝试使用完全相同的代码时，它可以工作。有时不是。我什至拍了一段视频来重现整个错误，因为这太奇怪了，我找不到解决方案。我已经向好的程序员朋友展示了这个错误，他们也不明白......

以前有人吃过吗？

这是代码，以防万一

  <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。一切都很完美，除了我复制的那一行。这就是为什么我说我试图删除这个文件中的所有内容只是为了保留我复制的那个（检查没有语法错误）。对不起，我应该更清楚的混乱。

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

非常感谢

【问题讨论】：

如果该 HTML 是您拥有的客户端，那么这就是您的问题，因为它是无效的
您在哪里定义代码示例中显示的 CSS？
您是否真的在使用该代码，或者您仅复制/粘贴了相关的 html 和 css？如果这就是你的方式，那就错了，因为 css 不在 <style> 标签中，所以它不会被读取。
我复制并粘贴了有问题的 HTML 和 css。我的 css 在一个单独的 CSS 文件中，该 CSS 文件中的所有内容都运行良好，只是不是这一行。很抱歉造成混乱
您的控制台中是否出现任何错误？

标签： html css ruby-on-rails

【解决方案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 等简单任务，问题出在您的代码上。

确保某处没有语法错误

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

【讨论】：

你好。刚刚在 jsbin 中尝试过，它可以工作......我的 CSS 在一个 CSS 文件中，所以我不需要样式标签，这个文件中的所有其他内容都可以正常工作。我更改了帖子的主题并补充说 Rails 出现了问题。这可能与资产有关，我不确定...谢谢！

【解决方案2】：

尝试这样使用：

  <style>
  .text-step {
    width: 45vw;
  }
</style>

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

【讨论】：

我确实试过这个，但它也不起作用。我想把我的风格保存在一个单独的 css 文件中以保持干净。但即使在 HTML 文件中并使用此样式标记，也无法正常工作

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
        }
        *, *::before, *::after {
            box-sizing: border-box;
        }
        div {
            display: block;
            margin: 0 auto;
        }
        .text-step {
            width: 45vw;
            background-color: #dddddd;
            padding: 15px;
        }

    <div>
        <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>
    </div>

【讨论】：