Question

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/

Answer 1

这是因为CSS中.m-title之后的空格字符不是空格，而是其他字符（看起来像空格）。因此浏览器认为该字符是类名的一部分。删除该空格并重试，当用实际空格字符替换空格时，在jsfiddle中工作。

CSS类没有应用

1 个答案: