我該如何申請這個CSS類

Question

我在申請這個CSS類時遇到了麻煩。 red-text類不適用於我的HTML。爲什麼？

這裏是CSS：

<style> 
.red-text { 
    color: #FF0000 
} 
.green-text { 
color: #00FF00 
} 
.dodger-blue-text { 
color: #2998E4 
} 
.orange-text { 
color: #FFA500 
} 
</style> 

HTML：

<h1 class="red-text">I am red!</h1> 
<h2 class="green-text">I am green!</h2> 
<h3 class="dodger-blue-text">I am dodger blue!</h3> 
<h4 class="orange-text">I am orange!</h4> 

爲什麼red-text沒有得到應用？

Answer 1

你的CSS是不正確的：它不應該包括<style>標籤。

這可能是爲什麼你的.red-text規則不起作用：瀏覽器無法解析規則<style>.red-style {color: #FF0000}，因爲它不是有效的CSS。

刪除<style>標籤，並應該工作。

順便說一句，請注意，瀏覽器也無法解析樣式表的最後一條規則</style>。但是這並不影響任何內容，這就是爲什麼.orange-text規則可行。

編輯：它更有趣。 Chrome瀏覽器簡單地忽略了</style>標籤。如果你檢查這JSFiddle與Chrome檢查，這裏是你發現了什麼：

<style type="text/css"> 
    <style> 
.red-text { 
    color: #FF0000 
} 
.green-text { 
color: #00FF00 
} 
.dodger-blue-text { 
color: #2998E4 
} 
.orange-text { 
color: #FFA500 
} 
</style> 

奇怪的是，Chrome可以檢測到結束</style>標籤不應該存在的，但它是不能夠做同樣的開放<style>標記。請注意，如果您錯誤地將結束標記拼寫爲</stylle>，則Chrome不會刪除它。

Answer 2

它的工作。你正在使用內部或外部樣式表。如果外部手段去除<style>標籤

.red-text { 
 
    color: #FF0000; 
 
} 
 
.green-text { 
 
color: #00FF00; 
 
} 
 
.dodger-blue-text { 
 
color: #2998E4; 
 
} 
 
.orange-text { 
 
color: #FFA500; 
 
}

<h1 class="red-text">I am red!</h1> 
 
<h2 class="green-text">I am green!</h2> 
 
<h3 class="dodger-blue-text">I am dodger blue!</h3> 
 
<h4 class="orange-text">I am orange!</h4>