css 2 引入了屬性選擇器。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。
如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：
*[title]
與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式：
a[href]
還可以根據多個屬性進行選擇，只需將屬性選擇器鏈結在一起即可。
a[href][title]
可以採用一些創造性的方法使用這個特性。
例如，可以對所有帶有 alt 屬性的影象應用樣式，從而突出顯示這些有效的影象：
img[alt]
屬性選擇器在 xml 文件中相當有用，因為 xml 語言主張要針對元素和屬性的用途指定元素名和屬性名。
假設我們為描述太陽系行星設計了乙個 xml 文件。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關注有 moons 的行星，就可以這樣寫：
planet[moons]
這會讓以下標記片段中的第二個和第三個元素的文字顯示為紅色，但第乙個元素的文字不是紅色：
venusearth
mars
除了選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素。
[href=""]
與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈結在一起來選擇乙個文件。
a[href=""][title="w3school"]
同樣地，xml 語言也可以利用這種方法來設定樣式。
下面我們再回到行星那個例子中。假設只希望選擇 moons 屬性值為 1 的那些 planet 元素：
planet[moons="1"]
上面的**會把以下標記中的第二個元素變成紅色，但第乙個和第三個元素不受影響：
venusearth
mars
請注意，這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表，匹配就可能出問題。
請考慮一下的標記片段：
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。
img[title~="figure"]
這個規則會選擇 title 文字包含 "figure" 的所有影象。沒有 title 屬性或者 title 屬性中不包含 "figure" 的影象都不會匹配。
下面為您介紹乙個更高階的選擇器模組，它是 css2 完成之後發布的，其中包含了更多的部分值屬性選擇器。按照規範的說法，應該稱之為「子串匹配屬性選擇器」。
很多現代瀏覽器都支援這些選擇器，包括 ie7。
下表是對這些選擇器的簡單總結：
型別描述
[abc^="def"]
選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]
選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]
選擇 abc 屬性值中包含子串 "def" 的所有元素
可以想到，這些選擇有很多用途。
a[href*="w3school.com.cn"]
最後為您介紹特定屬性選擇器。請看下面的例子：
*[lang|="en"]
上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇後兩個元素：
hello!greetings!
g'day!
bonjour!
jrooana!
一般來說，[att|="val"] 可以用於任何屬性及其值。
假設乙個 html 文件中有一系列，其中每個的檔名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些影象：
img[src|="figure"]
當然，這種屬性選擇器最常見的用途還是匹配語言值。
jquery根據屬性查詢元素
1.查詢所有含有 id 屬性的 div 元素 div p hello p div div id test2 div jquery div id 2.查詢所有 name 屬性是 newsletter 的 input 元素 input type checkbox name newsletter valu...
CSS隱藏元素屬性
css隱藏元素屬性 display none 元素消失,不保留原占有空間 visibility hidden 設定元素能見度 hidden 元素消失,保留原占有空間，被隱藏元素的事件不能觸發 opacity 0 設定元素的不透明度 0 元素消失,保留原占有空間，被隱藏元素的事件能觸發 舉例 doct...
css 元素的width height屬性
元素的width height屬性 本文介紹width與height屬性的 1 預設值 和 2 顯式設定百分比 情況下的計算方法。1 預設值 以下情況會預設 繼承 直接父元素的，無需顯式設定width height值 無float和position的且是block的元素 若非上述情況且不顯式設定寬高...