溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中class與id有什么區(qū)別

發(fā)布時(shí)間：2021-04-01 16:16:05 來源：億速云 閱讀：236 作者：Leah 欄目：web開發(fā)

CSS中class與id有什么區(qū)別？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。


Class 在程序中稱“類”，同時(shí)在CSS中也書面語(yǔ)也叫“類”。在CSS樣式中以小寫的“點(diǎn)”及“.”來命名如： .css5{屬性：屬性值;} ,而在html頁(yè)面里則以class="css5" 來選擇調(diào)用,命名好的CSS又叫css選擇器。如： .css5{屬性：屬性值;} 選擇器在html調(diào)用為“<div class="css5">我是class例子</div> ”如果不知道怎么引用CSS，那就可以了解下css引用。

而且class(類)在同一個(gè)html網(wǎng)頁(yè)頁(yè)面可以無(wú)數(shù)次的調(diào)用相同的class類，在這里例子里則可以在對(duì)應(yīng)的網(wǎng)頁(yè)里可以無(wú)數(shù)次調(diào)用選擇“css5”。這也說明class一般是用來調(diào)用css中的預(yù)配制屬性的，比如說有一個(gè)預(yù)配制屬性為如這里的“.class01{屬性：屬性值;} ”，這樣就可以像調(diào)用函數(shù)一樣不用再一個(gè)網(wǎng)頁(yè)頁(yè)面里重復(fù)的配置一個(gè)“類”屬性，而只需要寫上一個(gè)class類選擇，就可以在同一個(gè)頁(yè)面里任何位置調(diào)用選擇具有相同的CLASS類。

ID是表示著標(biāo)簽的身份，在JS腳本中會(huì)用到id，當(dāng)JS要修改一個(gè)標(biāo)簽的屬性時(shí)，JS會(huì)將id名作為該標(biāo)簽的唯一標(biāo)識(shí)進(jìn)行操作。也就是說ID只是頁(yè)面元素的標(biāo)識(shí)，供其他元素腳本等引用。假如你的頁(yè)面里出現(xiàn)了兩個(gè)ID那JS效果特性較出現(xiàn)邏輯錯(cuò)誤不知道依據(jù)哪個(gè)ID來改變其標(biāo)簽屬性。 在CSS里的ID不一定為JS而設(shè)置的，但是同樣ID在頁(yè)面里也只能出現(xiàn)一次，并且是唯一性。雖然可能我們才學(xué)DIV+CSS愛好者在一個(gè)頁(yè)面里同時(shí)調(diào)用相同的ID多次但是仍然沒有出現(xiàn)頁(yè)面混亂錯(cuò)誤，但是我們?yōu)榱薟3C及各個(gè)標(biāo)準(zhǔn)我們也要遵循ID在一個(gè)頁(yè)面里唯一性。以免出現(xiàn)瀏覽器兼容問題。

Div css 頁(yè)面中的ID是怎么個(gè)用法呢？
通常我們?cè)贑SS樣式定義的時(shí)候 以“#”來開頭命名id名稱如：#css5{屬性:屬性值;} 這個(gè)也有點(diǎn)像class的定義，只是class是以小寫句號(hào)“.”開頭命名，而ID是以“#”好開頭定義。那id是怎么個(gè)用法呢？ Css里的ID用法與class用法一樣，只是把class換成id。如例子：在CSS樣式定義ID --- #css5{height:25px;width: 200px;} ,調(diào)用ID --- <div id="css5">我是ID例子</div>。

接下來我們來看下完整關(guān)于CLASS和ID實(shí)例：


代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>DIV CSS中CLASS與ID實(shí)例 - -DIV+CSS-www.divcss5.com</title> 
<style> 
.css5{ width:100px; height:100px; border:1px solid #000; float:left; } 
.css5_class{ background:#FFF;} /* 背景白色 */ 
#css5_id{ background:#FF0000;} /* 背景紅色 */ 
</style> 
</head> 
<body> 
<div class="css5 css5_class">我在瀏覽器下瀏覽，內(nèi)容背景將是白色</div> 
<div class="css5" id="css5_id">我在瀏覽器下瀏覽，內(nèi)容背景將是紅色</div> 
</body> 
</html>


接下來我們分析一下以上實(shí)例：class="css5 css5_class" 怎么是這樣的？這里是相當(dāng)于調(diào)用選擇了class類css5與css5_class 。class="css5" id="css5_id" 這里同樣是選擇調(diào)用了class類 :css5和id :css5_id 。


看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手