CSS类不适用[重复]答案

【问题标题】：CSS class not applying [duplicate]CSS类不适用[重复]
【发布时间】：2015-06-20 17:56:57
【问题描述】：

HTML：

<nav>
  <ul>
    <li>
      <a href="/">
        <span class="m-icon fa fa-close"></span>
        <span class="m-title">Title 1</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span class="m-icon fa fa-close"></span>
        <span class="m-title">Title 2</span>
      </a>
    </li>
  </ul>
</nav>

CSS：

.m-title {
  border: 1px solid #c42;
}

问题：

我有这个代码，而 m-title 类不起作用。当我使用 Chrome 检查器工具时，该类没有出现。我试图通过 id 更改班级，但问题仍然存在。

如果我修改 CSS

.m-title, .test {
  border: 1px solid #c42;
}

边框已显示。为什么会出现这种情况？

已检查：

这些类已添加到最终的 CSS 文件中。
所有 CSS 代码均由 SASS 生成，并且不包含错误（不缺少括号等）。
该问题出现在 Chrome、Firefox 和 Safari（MacOS 和 Windows）中。

更新：

我的项目中有更多的 CSS 类不起作用（它们应该）的案例，我看到了一个模式。看起来 SASS 生成的最终 CSS 在类名后引入了一些空格。只有在我使用嵌套类时才会添加这些空格。

这里是一个简化的例子：https://jsfiddle.net/cespon/qw34g1tp/1/

【问题讨论】：

我假设实际的 CSS 加载成功/已正确包含......
是的，在这两种情况下。有和没有.test 类。
你能在 js.fiddle 中举例说明你的问题吗？
我做了一个小提琴，它似乎按预期工作？ jsfiddle.net/1y0vunc8/3
您能否截取 Chrome 检查器工具未显示课程的意思？我会怀疑一种具有更高流行度的冲突风格。如果你使用控制台$('.m-title')，你得到预期的元素了吗？

标签： css class sass

【解决方案1】：

这是因为 CSS 中紧跟在 .m-title 之后的空白字符不是空格，而是其他字符（看起来像空格）。所以浏览器认为这个字符是类名的一部分。删除该空格并重试，当您将空格替换为实际的空格字符时，它在 jsfiddle 中有效。

【讨论】：