CSS class selectors not changing anything

我遇到了CSS問題。它應該設置一個div的顏色（用於倒計時），但文本的顏色不會改變。我已經嘗試了很多修補程序，但無法使其正常工作。下面是相關的CSS：CSS class selectors not changing anything

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

在此先感謝。

來源

2015-10-15 JThistle

css不能以數字開頭？ – slashsharp

CSS聲明不能以數字開頭，請參閱http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors – RafH

請參閱http://stackoverflow.com/questions/27016787/how-to-target-css-class-names-that-start-digit- –

這是因爲你的類名以數字開頭，這在CSS中是不允許的。回覆姓名和號碼，例如：

.sec5{ 
 
    color: green; 
 
}

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

看這個question它是關於CSS類名很好的解釋

來源

2015-10-15 06:44:21 Chris

我有機會試試這個，謝謝。 – JThistle

這裏的問題你正在使用時間參數爲一個類名，而不是您可以使用下面的格式

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

來源

2015-10-15 06:51:59

.myClass { 
 
    color: green; 
 
}

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

來源

2015-10-15 06:52:36

從技術上講，它不是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，並避免所有這些問題。

來源

2015-10-15 07:00:33

CSS class selectors not changing anything

回答

相關問題