CSS類和ID選擇器的區(qū)別是什么

這篇文章主要講解了“CSS類和ID選擇器的區(qū)別是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS類和ID選擇器的區(qū)別是什么”吧！

相同點(diǎn)：可以應(yīng)用于任何元素

不同點(diǎn)：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

下面代碼是正確的：

<p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。</p>

而下面代碼是錯誤的：

<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題。</p>

2、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)多個樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。

下面的代碼是正確的(完整代碼見右側(cè)代碼編輯器)

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

<p>到了<span class="stress bigsize">三年級</span>下學(xué)期時，我們班上了一節(jié)公開課...</p>

上面代碼的作用是為“三年級”三個文字設(shè)置文本顏色為紅色并且字號為25px

下面的代碼是不正確的(完整代碼見右側(cè)代碼編輯器)

#stressid{

color:red;

}

#bigsizeid{

font-size:25px;

}

<p>到了<span id="stressid bigsizeid">三年級</span>下學(xué)期時，我們班上了一節(jié)公開課...</p>

上面代碼不可以實(shí)現(xiàn)為“三年級”三個文字設(shè)置文本顏色為紅色并且字號為25px的作用。

感謝各位的閱讀，以上就是“CSS類和ID選擇器的區(qū)別是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS類和ID選擇器的區(qū)別是什么這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！