CSS id選擇器和class選擇器區(qū)別
前一節(jié)介紹了幾種基本的選擇器,這一節(jié)分享的是id和class的區(qū)別比較
id和class屬性是網(wǎng)頁中兩個(gè)通用的屬性,它們協(xié)同工作使整個(gè)頁面變得豐富多彩。當(dāng)我們?yōu)橐粋€(gè)元素定義樣式時(shí)??梢允褂胕d,也可以使用class。但是我們也應(yīng)該注意這兩者的區(qū)別。?
1,在css樣式表中書寫時(shí),id選擇符前面應(yīng)該加前綴符號‘#’,而class選擇符前面應(yīng)該加前綴符號‘.’。?
2,id屬性一般在一個(gè)頁面中只可以使用一次,而class可以被多次引用。?
3,id作為元素的標(biāo)簽,用于區(qū)分不同結(jié)構(gòu)和內(nèi)容,而class作為一個(gè)樣式,它可以應(yīng)用到任何結(jié)構(gòu)和內(nèi)容上。?
4,在布局思路上,一般堅(jiān)持這樣的原則:id是先確定頁面的結(jié)構(gòu)和內(nèi)容,然后再為它定義樣式:而class相反,它先定義好一類樣式,然后再頁面中根據(jù)需要把類樣式應(yīng)用到不同的元素和內(nèi)容上面。?
5,目前瀏覽器都能允許在同一個(gè)頁面內(nèi)出現(xiàn)多個(gè)相同屬性值的id,一般情況下也能正常顯示,不過當(dāng)使用javascript通過id來控制元素時(shí)就會(huì)出現(xiàn)錯(cuò)誤。?
6,在實(shí)際應(yīng)用時(shí),class更多的被應(yīng)用到文字版塊以及頁面修飾等方面,而id更多地被用來實(shí)現(xiàn)宏偉布局和設(shè)計(jì)包含塊,或包含框的樣式。?
注釋:
ID 有高優(yōu)先級、唯一性的特點(diǎn),特指「個(gè)體」。
相對于 ID,class 的優(yōu)先級比較適中,特指「特定群體」。
Class 的使用需要參考面向?qū)ο蟮某橄蟾拍?,把共有的屬性抽象出來?/strong>
ID是先找到結(jié)構(gòu)/內(nèi)容,再給它定義樣式;
Class是先定義好一種樣式,再套給多個(gè)結(jié)構(gòu)/內(nèi)容。