Селектора классов 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

Проблема здесь используется параметр времени в качестве имени класса вместо вы можете использовать ниже формат

.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>

Answer 3

.myClass { 
 
    color: green; 
 
}

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

Answer 4

Технически говоря, это не то, что HTML-классы не могут начинаться с цифры. Скорее всего, это то, что 10seconds не является допустимым CSS идентификатор, что означает, что процессор CSS будет подавиться правило, такие как

.10seconds { } 

и игнорировать его. Решение, если вы действительно хотите использовать 10seconds класс, чтобы избежать ведущей цифры:

.\31 0seconds { } 

\31 здесь является цифра 1, и последовательность выхода «съедает» следующее пространство.

Другой вариант заключается в написании правила с помощью селектора атрибутов:

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

См this question (второй ответ):

Если вы хотите использовать имя класса, который не является допустимым идентификатором CSS в querySelector, вы можете использовать утилиту CSS.escape, если она доступна на вашей платформе:

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

... большинство ответов здесь неверны. Оказывается, любой символ, кроме NUL, разрешен как имя класса CSS в CSS.

Конечно, как и другие ответы предполагают, вы можете предпочесть просто использовать допустимые идентификаторы CSS в качестве имен классов, таких как seconds10 и избежать все эти неприятности.