關(guān)于ID選擇器
和class選擇器不同，這里使用#
class的值不同標(biāo)簽可以發(fā)生重復(fù)。但是id不允許?。?！
id選擇器不能結(jié)合使用
id屬性通常和js配合使用

思考
最近我在對(duì) CSS 的樣式進(jìn)行一些性能測試，然后我的一些好友問我：為什么你不使用 IDs 來作為頁面上一些特定的內(nèi)容部分呢？
這個(gè)問題很難回答，有下面幾個(gè)理由：
1.頁面中的該元素?zé)o法重用
2.螺旋式下降導(dǎo)致的特異性
3.通過 IDs 用來標(biāo)識(shí)一些非常特殊的內(nèi)容，但犧牲了抽象性
4.性能方面可通過其他方式來解決
5.下面我們針對(duì)這四點(diǎn)進(jìn)行深入探討。

無法重用頁面的元素
IDs 對(duì)程序員來說相當(dāng)于是單例，一個(gè)頁面中不允許存在兩個(gè)相同的 id（當(dāng)然瀏覽器不會(huì)報(bào)錯(cuò)就是了），這就意味著你不可能重用某個(gè)元素，相當(dāng)于是一對(duì)一的關(guān)系。而根據(jù)我的速度測試，如果一段 CSS 代碼只對(duì)一個(gè)元素起作用對(duì)速度并不利，同時(shí)也帶來了 CSS 膨脹的額外開銷。

由螺旋式下降導(dǎo)致的特異性
CSS 關(guān)于重載的兩個(gè)方法：
1.級(jí)聯(lián): (任何下一級(jí)的元素都可以重寫上一級(jí)CSS規(guī)則)
2.特異性: the idea of creating weight by using weighted selectors.
為什么我說這里是一個(gè)螺旋式下降，因?yàn)闉榱艘剌d一個(gè)優(yōu)先級(jí)很高的規(guī)則，我必須給它設(shè)置添加再高的優(yōu)先級(jí)。

上面是我在 2005 年的一段真實(shí)的代碼，上面的代碼我必須在最后使用 !important 規(guī)則來對(duì)選擇器規(guī)則進(jìn)行重新排序。這很不好。一旦我們這樣做......它需要我們更多的時(shí)間去追捕父ID，我們將推翻當(dāng)前的特異性。這是不友好的而且不利于維護(hù)，最終你會(huì)掉進(jìn)入自己挖好的洞，只有重構(gòu)才能擺脫這個(gè)噩夢。

另一方面：
我聽到少數(shù)的一些聲音關(guān)于使用 ID 選擇器的好

使用 ID 選擇器更快
是的，這一點(diǎn)的確沒錯(cuò)，而且我也曾經(jīng)證明過。但是性能的表現(xiàn)微乎其微，但當(dāng)你使用嵌套其他選擇器時(shí)性能就下降了：

第二個(gè)選擇器就沒有第三個(gè)來的快，因?yàn)镃SS是從右到左的，因此 li 會(huì)先被掃描，因此通過 ID 進(jìn)行定位將直接被忽略。
關(guān)于 CSS 選擇器的性能問題，請看 Steve Souders explains how selector speed works.

IDs 就是單例的意思
很多人會(huì)在頁面中定義 ID ，但某個(gè)元素在所有頁面中只出現(xiàn)一次的話，用 ID 選擇器是沒問題的。我唯一聲明的是所有代碼都應(yīng)該是可重用的，如果能避免還是盡量避免。

特別說明
最后需要說明的是，我并不是要大家完全拋棄使用 ID，ID 可以加速 JavaScript 執(zhí)行，在文檔中傳達(dá)具體的意義。
我只是不建議在 CSS 中使用 ID 選擇器，當(dāng)然，決定權(quán)在于你自己。

最新評(píng)論