詳解CSS中的類和ID選擇符

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