這篇文章主要為大家展示了“CSS中ID選擇器的使用技巧有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中ID選擇器的使用技巧有哪些”這篇文章吧。

創(chuàng)新新互聯(lián)，憑借10余年的成都做網(wǎng)站、網(wǎng)站設(shè)計經(jīng)驗，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計網(wǎng)站有千余家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)。

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

#label {   
    background-color: red;   
}

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

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

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

.ModuleOfficeList .property-checkbox input {display:block;margin-bottom:8px;_border:0px !important;}    
.ModuleOfficeList .property-checkbox,   
.ModuleOfficeList .new-icon,   
.ModuleOfficeList .open-icon {display:block}    
....uid-officelistings .property-checkbox {display:none !important; }

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

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

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

#profile-module {...}    
#profile-module li {...}    
.profile-module li {...}

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

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

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

以上是“CSS中ID選擇器的使用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！