CSS選擇器中類和ID選擇器的區別


類和ID選擇器的區別

學習了類選擇器和ID選擇器,我們會發現他們之間有很多的相似處,是不是兩者可以通用呢?我們不要着急先來總結一下他們的相同點和不同點:

相同點:可以應用於任何元素
不同點:

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、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式,但只可以用類選擇器的方法實現,ID選擇器是不可以的(不能使用 ID 詞列表)。

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

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時,我們班上了一節公開課...</p>

上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色並且字號為25px。

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

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時,我們班上了一節公開課...</p>

上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色並且字號為25px的作用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM