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

Posted 2023-03-06

【中文标题】CSS类选择器没有改变任何东西[重复]

【英文标题】：CSS class selectors not changing anything [duplicate]

【发布时间】：2016-01-13 11:58:48

【问题描述】：

我的 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。

提前致谢。

【问题讨论】：

css不能以数字开头？

CSS声明不能以数字开头，见***.com/questions/448981/…

见***.com/questions/27016787/…

如果这些答案对您有帮助，请接受其中一个。

【参考方案1】：

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

.sec5
  color: green;

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

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

【讨论】：

有机会我会试试这个的，谢谢。

【参考方案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，并避免所有这些麻烦。

【参考方案3】：

.myClass 
    color: green;

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

【参考方案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>