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

这是因为您的类名以number开头，而CSS中不允许这样。恢复名称和号码，例如：

＆＃13;

.sec5{
  color: green;
}

＆＃13;

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

＆＃13;

看看这个question，对CSS类名称进行了很好的解释

Answer 2

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

.10seconds { }

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

.\31 0seconds { }

\31这里是数字1，转义序列＆＃34;吃掉＆＃34;以下空间。

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

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

见this question（第二个答案）：

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

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

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

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

Answer 3

问题在于您使用时间参数作为类名，而不是使用以下格式

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

.myClass {
    color: green;
}

＆＃13;

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

＆＃13;

CSS类选择器没有改变任何东西

4 个答案: