CSS 屬性選取器 模糊比對的使用

文章目錄

• 部分值屬性選取器與點號類名記法的區別
•  
• 子串匹配屬性選取器

轉自：http://www.w3school.com.cn/css/css_selector_attribute.asp，屬性選取器 

 根據部分屬性值選擇

如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。

假設您想選擇 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;}

感歎：強大的屬性模糊比對呀。