8-5類和ID選擇器的區別 · 初識HTML+CSS

學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？我們不要著急先來總結一下他們的相同點和不同點： **相同點：**可以應用于任何元素 **不同點：** 1、**ID選擇器只能在文檔中使用一次**。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。下面代碼是正確的： ~~~ 三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。 ~~~ 而下面代碼是錯誤的： ~~~ 三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。 ~~~ 2、**可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。**我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（**不能使用 ID 詞列表）。** 下面的代碼是**正確**的(完整代碼見右側代碼編輯器) ~~~ .stress{ ? ? color:red; } .bigsize{ ? ? font-size:25px; } 到了三年級下學期時，我們班上了一節公開課... ~~~ 上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色并且字號為25px。下面的代碼是**不正確**的(完整代碼見右側代碼編輯器) ~~~ #stressid{ ? ? color:red; } #bigsizeid{ ? ? font-size:25px; } 到了三年級下學期時，我們班上了一節公開課... ~~~ 上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色并且字號為25px的作用。 ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>類和ID選擇器的區別</title> <style type="text/css"> .stress{ color:red; } .bigsize{ font-size:25px; } #stressid{ color:red; } #bigsizeid{ font-size:25px; } </style> </head> <body> <h1>勇氣</h1> 三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。 到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。 到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。 </body> </html> ```