詳解CSS中的類(lèi)和ID選擇符
我要評(píng)論類(lèi)屬性
類(lèi)選擇符
格式：.類(lèi)名
示例：
- .specialtext {font-style:italic;}
標(biāo)簽帶類(lèi)選擇符
格式：標(biāo)簽名.類(lèi)名
示例：
- p.specialtext {color:red;}
多類(lèi)選擇符
格式：.類(lèi)名.類(lèi)名
示例：
- .specialtext.featured {font-size:120%;}
說(shuō)明：CSS選擇符的兩個(gè)類(lèi)名之間沒(méi)有空格，因?yàn)槲覀冎幌脒x擇同時(shí)具有這兩個(gè)類(lèi)名的的那個(gè)元素。如果加了空格，那就變成了“祖先/后代”關(guān)系的上下文選擇符了。
提示：不要像使用 ID 一樣，每個(gè)類(lèi)都指定一個(gè)不同的類(lèi)名，然后再為每個(gè)類(lèi)編寫(xiě)規(guī)則。如果你確實(shí)有這種隨意使用類(lèi)的習(xí)慣，那說(shuō)明你可能想大多數(shù)對(duì) CSS 充滿激情的初學(xué)者一樣，還不了解繼承和上下文選擇符的作用。 于是，你可能會(huì)給每個(gè)標(biāo)簽都重復(fù)寫(xiě)同樣的樣式（比如為頁(yè)面中很多標(biāo)簽分別指定相同的字體）。實(shí)際上，繼承和上下文選擇符能讓不同的標(biāo)簽共享樣式，從而降低你需要編寫(xiě)和維護(hù)的 CSS 量。
ID屬性
格式：#ID名 或 標(biāo)簽名#ID名
示例：
- #specialtext {CSS 樣式聲明 }
或
- p#specialtext {CSS 樣式聲明 }
提示：ID還可以用于頁(yè)內(nèi)導(dǎo)航。 例如：<a href="#bio">Biography</a>，注意 href 屬性值開(kāi)頭的 # ，它表示這個(gè)鏈接的目標(biāo)在當(dāng)前頁(yè)面中，因而不會(huì)觸發(fā)瀏覽器加載頁(yè)面（如果沒(méi)有 #，瀏覽器就會(huì)嘗試加載 bio 目錄下的默認(rèn)頁(yè)面了）。如果鏈接的 href 屬性里只有一個(gè) #，那么點(diǎn)擊該鏈接會(huì)返回頁(yè)面頂部。例如：<a href="#">Back to Top</a>，換句話說(shuō)，要寫(xiě)一個(gè)“返回頂部”鏈接，根本不需要 ID 為 # 的目標(biāo)元素。
注意：如果暫時(shí)不知道某個(gè) href 應(yīng)該放什么 URL，也可以用 # 作為占位符，但不能把該屬性留空。 因?yàn)?href 屬性值為空的鏈接的行為跟正常鏈接不一樣。這樣，團(tuán)隊(duì)中的其他人將來(lái)可以用中間層（比如 PHP）變量替換 #，以便動(dòng)態(tài)接收來(lái)自數(shù)據(jù)庫(kù)的 URL。
相關(guān)文章
這篇文章主要介紹了CSS 類(lèi)選擇符和ID選擇符的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-27
