選擇器是 css 中乙個非常重要的知識塊。總得來說，大體分為五大類：基本選擇器，關係選擇器，偽類選擇器，偽元素選擇器，屬性選擇器。這裡先補充下屬性選擇器。
前面我們講元素的時候已經說過，可以用一些屬性來表示元素的一些特徵。現在我們就可以利用這些特徵來選中該元素，如類選擇器及id選擇器，其實都是利用屬性 class 和 id 的值構造起來的選擇器，這可以視作 class 和 id 屬性的一種特殊待遇，而其他的屬性就得按部就班來了。
總得來說，屬性選擇器搭配比較自由，既可以根據屬性來選，也可以根據屬性值來選，還可以根據部分屬性值來選，具體規則如下：
選擇器描述
[attribute]
用於選取帶有指定屬性的元素
[attribute=value]
用於選取帶有指定屬性和值的元素
[attribute\^=value]
匹配屬性值以指定值開頭的每個元素
[attribute$=value]
匹配屬性值以指定值結尾的每個元素
[attribute*=value]
匹配屬性值中包含指定值的每個元素
[attribute~=value]
用於選取屬性值中包含指定詞彙的元素
[attribute|=value]
用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞
下面我們使用這四個 a 元素來具體實踐下：
href=""
href="css-basic.pdf" >css學習文件a>
href="css.png" >css 腦圖a>
href=""
title=「imweb」>imweb學院a>
對應的選擇器如下：
/* 選中 title 屬性鏈結 */
a[title] {}
/* 選中新視窗開啟的鏈結 */
a[target="_blank"] {}
/* 選中 pdf */
a[href$=".pdf"] {}
/* 選中 png */
a[href$=".png"] {}
/* 選中絕對路徑鏈結 */
a[href^="https://"] {}
根據**效率專家 steve souders 指出，各種 css 選擇器的效率由高至低排序如下
以下面的 p 元素為例：
id="test"
class="red">我用來測試選擇器的優化p>
p，.red，#test，[class="red"]等等。但是如果按照執行效率來說，id選擇器是最佳的，其次是類選擇器，然後是元素選擇，最後才是屬性選擇器。
一般來說，在具體的專案中，html 結構都比較複雜，所以關係選擇器使用非常的普遍。對於關係選擇器來說，我們的閱讀習慣是從左到右，但是瀏覽器解讀選擇器，遵循的原則是從選擇器的右邊到左邊讀取。
如對於選擇器.list .item .item-tt，瀏覽器先找的是.item-tt，然後繼續向父級元素尋找.item，再找.list，這樣才完成了最終的選擇器匹配。
所以如果路徑鏈越短，效率也就相應有所提高。這裡建議選擇器的層級最多不要超過4層，如.demo .list .item .item-tt .tt-link就有5層了，可根據實際情況考慮縮短為4層以內，如.demo .item-tt .tt-link
css權威指南（2） 選擇器
類選擇器 類選擇器的用法很簡單，個人最常用的寫法如下 warning 今天看了書，發現還有這種寫法 p.warning選擇器會匹配class屬性包含warning的所有p元素，其他任何型別的元素都不會匹配，不管是否有此class屬性，color red warning class warning h...
jQuery選擇器之全選擇器（ 選擇器）
在css中，經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery，如果要獲取文件中所有的元素，通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...
jQuery選擇器之全選擇器（選擇器）
jquery選擇器之全選擇器 選擇器 在css中，經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery，如果要獲取文件中所有的元素，通過document.getelementsbytagna...