当我应用CSS类时，应用该类但具有空类

Question

在我的HTML文档的head中，我将所有CCS自定义类都放在style标记中，如下所示：

.purple-topbordered {
  border-top-color: #9c27b0;
}
.red-topbordered {
  border-top-color: #f44336;
}
.screenCentered {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}​
.editableInput {
  color: #2196f3;
}

当我这样做时，例如：

<div class="red-topbordered"></div>

CCS类正确应用但当我尝试在上使用 editableInput 类时：

<i class="fas fa-clock"></i>

看起来像这样：

<i class="fas fa-clock editableInput"></i>

当我转到Chrome开发工具时，我发现该类已应用于i标记，但未定义任何颜色样式。

有人可以指出问题可能是什么吗？这在我之前从未发生过。

Answer 1

这是因为你的css字符无效。 .screenCentered css。

末尾的css中有一个红点

用下面的css替换你的css。

而且我可以看到你正在使用font-awesome库... fas fa-clock应该是fa fa-clock-o

Stack Snippet

.purple-topbordered{
  border-top-color: #9c27b0;
}
.red-topbordered{
  border-top-color: #f44336;
}
.screenCentered{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.editableInput {
  color: #2196f3;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<i class="fa fa-clock-o editableInput"></i>