CSS类选择器没有改变任何东西[重复]

Question

我的 CSS 有问题。它应该使用类设置 div 的颜色（用于倒计时），但文本的颜色不会改变。我尝试了许多修复程序，但无法使其正常工作。这是相关的 CSS：

.10seconds, .9seconds, .8seconds, .7seconds, .6seconds { color: #00b200 ;}
.5seconds { color: #ADFF2F ;}
.4seconds { color: #E5E500 ;}
.3seconds { color: #FFA500 ;}
.2seconds { color: #FF5719 ;}
.1seconds { color: #FF0000;}

以及相关的HTML：

<div id='timer' class='10seconds'>10</div>

#timer 在我的 CSS 文件中没有设置规则。完整的CSS here。

提前致谢。

Answer 1

这是因为你的类名以数字开头，这在 CSS 中是不允许的。恢复名称和号码，例如：

.sec5{
  color: green;
}

<div class="sec5"> 5 sec </div>

看看这个question，它很好地解释了 CSS 类名

Answer 2

从技术上讲，并不是 HTML 类不能以数字开头。相反，10seconds 不是一个有效的 CSS 标识符，这意味着 CSS 处理器将阻塞诸如

之类的规则

.10seconds { }

并忽略它。如果您真的想使用10seconds 类，解决方案是转义前导数字：

.\31 0seconds { }

这里的\31 是一个数字1，转义序列“吃掉”了后面的空格。

另一种选择是使用属性选择器编写规则：

[class~="10seconds"] { color: #00b200; }

见this question（第二个答案）：

如果您想在querySelector 中使用不是有效CSS 标识符的类名，您可以使用CSS.escape 实用程序（如果它在您的平台上可用）：

document.querySelector('.' + CSS.escape('10seconds'))

...这里的大多数答案都是错误的。事实证明，除了 NUL 之外的任何字符都可以作为 CSS 中的 CSS 类名。

当然，正如其他答案所暗示的，您可能更喜欢简单地使用有效的 CSS 标识符作为类名，例如 seconds10，并避免所有这些麻烦。

Answer 3

.myClass {
    color: green;
}

<div class="myClass">This header should be GREEN to match the class selector 5 sec</div>

Answer 4

这里的问题是你使用时间参数作为类名而不是你可以使用下面的格式

.seconds10, .seconds9, .seconds8, .seconds7, .seconds6 { color: #00b200 ;}
.seconds4 { color: #E5E500 ;}
.seconds3 { color: #FFA500 ;}
.seconds2 { color: #FF5719 ;}
.seconds1 { color: #FF0000;}

<div id='timer' class='seconds10'>10</div>