CSS 屬性選擇器 模糊匹配的使用
阿新 • • 發佈：2018-12-26
轉自：http://www.w3school.com.cn/css/css_selector_attribute.asp，屬性選擇器
注意：部分值屬性選擇器，這裡的值一定是個完整的word,比如本處的Figure，若使用img[title~="Figu"] {border: 1px solid gray;}則css失效，部分匹配失敗。
根據部分屬性值選擇
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。
假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：
p[class~="important"] {color: red;}
如果忽略了波浪號，則說明需要完成完全值匹配。
部分值屬性選擇器與點號類名記法的區別
該選擇器等價於我們在類選擇器中討論過的點號類名記法。
也就是說，p.important 和 p["important"] 應用到 HTML 文件時是等價的。
那麼，為什麼還要有 "~=" 屬性選擇器呢？因為它能用於任何屬性，而不只是 class。
例如，可以有一個包含大量影象的文件，其中只有一部分是圖片。對此，可以使用一個基於 title 文件的部分屬性選擇器，只選擇這些圖片：
img[title~="Figure"] {border: 1px solid gray;}
這個規則會選擇 title 文字包含 "Figure" 的所有影象。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的影象都不會匹配。
注意：部分值屬性選擇器，這裡的值一定是個完整的word,比如本處的Figure，若使用img[title~="Figu"] {border: 1px solid gray;}則css失效，部分匹配失敗。
子串匹配屬性選擇器
下面為您介紹一個更高階的選擇器模組，它是 CSS2 完成之後釋出的，其中包含了更多的部分值屬性選擇器。按照規範的說法，應該稱之為“子串匹配屬性選擇器”。
很多現代瀏覽器都支援這些選擇器，包括 IE7。
下表是對這些選擇器的簡單總結：
| 型別 | 描述 |
|---|---|
| [abc^="def"] | 選擇 abc 屬性值以 "def" 開頭的所有元素 |
| [abc$="def"] | 選擇 abc 屬性值以 "def" 結尾的所有元素 |
| [abc*="def"] | 選擇 abc 屬性值中包含子串 "def" 的所有元素 |
可以想到，這些選擇有很多用途。
舉例來說，如果希望對指向 W3School 的所有連結應用樣式，不必為所有這些連結指定 class，再根據這個類編寫樣式，而只需編寫以下規則：
a[href*="w3school.com.cn"] {color: red;}
感嘆：強大的屬性模糊匹配呀。