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在这里.

提前致谢.

Answer 1

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

.sec5{
  color: green;
}

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

看看这个问题,很好地解释了CSS类名

Answer 2

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

.10seconds { }

并忽略它.如果你真的想使用这个10seconds类,解决方案是逃避前导数字:

.\31 0seconds { }

这\31是一个数字1,并且转义序列"吃掉"以下空格.

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

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

看到这个问题(第二个答案):

如果要使用不是有效CSS标识符的类名querySelector,可以使用该CSS.escape实用程序(如果它在您的平台上可用):

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

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

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