css 2 引入了屬性選擇器。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。
如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：
*[title]親自試一試
與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式：
a[href]親自試一試
還可以根據多個屬性進行選擇，只需將屬性選擇器鏈結在一起即可。
例如，為了將同時有 href 和 title 屬性的 html 超連結的文字設定為紅色，可以這樣寫：
a[href][title]親自試一試
可以採用一些創造性的方法使用這個特性。
例如，可以對所有帶有 alt 屬性的影象應用樣式，從而突出顯示這些有效的影象：
img[alt]親自試一試
上面這個特例更適合用來診斷而不是設計，即用來確定影象是否確實有效。
屬性選擇器在 xml 文件中相當有用，因為 xml 語言主張要針對元素和屬性的用途指定元素名和屬性名。
假設我們為描述太陽系行星設計了乙個 xml 文件。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關注有 moons 的行星，就可以這樣寫：
planet[moons]這會讓以下標記片段中的第二個和第三個元素的文字顯示為紅色，但第乙個元素的文字不是紅色：
venus檢視效果moons="1">earth
moons="2">mars
除了選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素。
例如，假設希望將指向 web 伺服器上某個指定文件的超連結變成紅色，可以這樣寫：
a[href=""]親自試一試
與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈結在一起來選擇乙個文件。
a[href=""][title="w3school"]這會把以下標記中的第乙個超連結的文字變為紅色，但是第二個或第三個鏈結不受影響：
href=""親自試一試title="w3school">w3school
csshtml
同樣地，xml 語言也可以利用這種方法來設定樣式。
下面我們再回到行星那個例子中。假設只希望選擇 moons 屬性值為 1 的那些 planet 元素：
planet[moons="1"]上面的**會把以下標記中的第二個元素變成紅色，但第乙個和第三個元素不受影響：
venus檢視效果moons="1">earth
mars
請注意，這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表，匹配就可能出問題。
請考慮一下的標記片段：
class="important warning">this paragraph is a very important warning.如果寫成 p[class="important"]，那麼這個規則不能匹配示例標記。
要根據具體屬性值來選擇該元素，必須這樣寫：
p[class="important warning"]親自試一試
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。
假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：
p[class~="important"]親自試一試
如果忽略了波浪號，則說明需要完成完全值匹配。
該選擇器等價於我們在類選擇器中討論過的點號類名記法。
也就是說，p.important 和 p[class="important"] 應用到 html 文件時是等價的。
那麼，為什麼還要有 "~=" 屬性選擇器呢？因為它能用於任何屬性，而不只是 class。
例如，可以有乙個包含大量影象的文件，其中只有一部分是。對此，可以使用乙個基於 title 文件的部分屬性選擇器，只選擇這些：
img[title~="figure"]這個規則會選擇 title 文字包含 "figure" 的所有影象。沒有 title 屬性或者 title 屬性中不包含 "figure" 的影象都不會匹配。
親自試一試
下面為您介紹乙個更高階的選擇器模組，它是 css2 完成之後發布的，其中包含了更多的部分值屬性選擇器。按照規範的說法，應該稱之為「子串匹配屬性選擇器」。
很多現代瀏覽器都支援這些選擇器，包括 ie7。
下表是對這些選擇器的簡單總結：
型別描述
[abc^="def"]
選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]
選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]
選擇 abc 屬性值中包含子串 "def" 的所有元素
可以想到，這些選擇有很多用途。
舉例來說，如果希望對指向 w3school 的所有鏈結應用樣式，不必為所有這些鏈結指定 class，再根據這個類編寫樣式，而只需編寫以下規則：
a[href*="w3school.com.cn"]親自試一試
任何屬性都可以使用這些選擇器。
最後為您介紹特定屬性選擇器。請看下面的例子：
*[lang|="en"]上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇後兩個元素：
en">hello!親自試一試en-us">greetings!
en-au">g'day!
bonjour!
jrooana!
一般來說，[att|="val"] 可以用於任何屬性及其值。
假設乙個 html 文件中有一系列，其中每個的檔名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些影象：
img[src|="figure"]親自試一試
當然，這種屬性選擇器最常見的用途還是匹配語言值。
選擇器描述[attribute]
用於選取帶有指定屬性的元素。
[attribute=value]
用於選取帶有指定屬性和值的元素。
[attribute~=value]
用於選取屬性值中包含指定詞彙的元素。
[attribute|=value]
用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]
匹配屬性值以指定值開頭的每個元素。
[attribute$=value]
匹配屬性值以指定值結尾的每個元素。
[attribute*=value]
匹配屬性值中包含指定值的每個元素。
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...
CSS屬性選擇器
簡單屬性選擇器，如 css h1 class html 那麼以上h1標籤裡的內容字型顏色都會改變。同時我們也可以通過這種方法來給自己建立的標籤加上樣式，如 css planet moon html venus earth mars 這樣的話，第二條和第三條就會被加上樣式。還可以根據標籤裡的具體屬性值...
css屬性選擇器
屬性選擇器可以為擁有指定屬性的 html 元素設定樣式，而不僅限於 class 和 id 屬性。hello world hellowprld 可見第一行和第二行是有有效的，第三行沒有，因為第三行的title值不為helloworld。下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用...