1. 程式人生 > >CSS 屬性選擇器 模糊匹配的使用

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;}
感嘆:強大的屬性模糊匹配呀。