CSS中ID選擇器的使用技巧有哪些

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

關于ID選擇器
和class選擇器不同，這里使用#
class的值不同標簽可以發生重復。但是id不允許！！！
id選擇器不能結合使用
id屬性通常和js配合使用

#label {   
    background-color: red;   
}

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

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

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

.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 規則來對選擇器規則進行重新排序。這很不好。一旦我們這樣做......它需要我們更多的時間去追捕父ID，我們將推翻當前的特異性。這是不友好的而且不利于維護，最終你會掉進入自己挖好的洞，只有重構才能擺脫這個噩夢。

另一方面：
我聽到少數的一些聲音關于使用 ID 選擇器的好

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

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

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

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

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

以上是“CSS中ID選擇器的使用技巧有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！