CSS 中的 id 和 class 你該選擇哪一個?

對于CSS而言,id和class都是選擇器,唯一不同的地方在于權(quán)重不同。
如果只說CSS,上面那一句話就講完了。
拓展出來,對于html而言,id和class都是dom元素的屬性值。不同的地方在于:

id屬性的值是唯一的,而class屬性值可以重復(fù)。

  • id具有唯一性,class具有普遍性。
  • id是唯一的,所以盡量在結(jié)構(gòu)外圍使用,通常用于頁面布局。
  • class是可重復(fù)的,所以盡量在結(jié)構(gòu)內(nèi)部使用,通常用于樣式定義。
  • id的樣式優(yōu)先級高于class。

其實(shí)在樣式表定義一個樣式的時候,即可以定義id也可以定義class。

1、在CSS文件里書寫時,id加前綴"#";class用"."
2、id一個頁面只可以使用一次;class可以多次引用。
3、id是一個標(biāo)簽,用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容,就象名字,如果一個屋子有2個人同名,就會出現(xiàn)混淆;class是一個樣式,可以套在任何結(jié)構(gòu)和內(nèi)容上,就象一件衣服;
4、從概念上說就是不一樣的:id是先找到結(jié)構(gòu)/內(nèi)容,再給它定義樣式;class是先定義好一種樣式,再套給多個結(jié)構(gòu)/內(nèi)容。
5、一個標(biāo)簽的id屬性的值只能有一個,而class屬性的值可以有多個。

目前的瀏覽器還都允許用多個相同ID,一般情況下也能正常顯示,不過當(dāng)你需要用JavaScript通過id來控制div時就會出現(xiàn)錯誤。
id還一個老特性是錨點(diǎn)功能,就是當(dāng)瀏覽器地址欄有一個#xxx,頁面會自動滾動到id=xxx的元素上面。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,969評論 19 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,806評論 1 92
  • 01 前兩天在網(wǎng)上看到一個話題征集:哪個瞬間讓你覺得世上壞人真多。其中有一個網(wǎng)友的留言得到了最多人數(shù)的點(diǎn)贊。 他說...
    貓妖叨叨閱讀 4,856評論 12 24
  • 是不是一直覺得欠自己一個交代,如果你可以回頭,是不是會對當(dāng)時的自己抱一抱,然后說一句,加油,一切都會好的。 ...
    Miranda_Y閱讀 187評論 0 0
  • Business: Schumpeter: Leaving for the city Lots of promin...
    Sharon667閱讀 316評論 0 0