轉(zhuǎn)自：

http://www.w3school.com.cn/css/css_selector_attribute.asp，屬性選擇器

根據(jù)部分屬性值選擇

如果需要根據(jù)屬性值中的詞列表的某個詞進(jìn)行選擇，則需要使用波浪號(~)。

假設(shè)您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點(diǎn)：

p[class~="important"] {color: red;}

如果忽略了波浪號，則說明需要完成完全值匹配。

部分值屬性選擇器與點(diǎn)號類名記法的區(qū)別

該選擇器等價于我們在類選擇器中討論過的點(diǎn)號類名記法。

也就是說，p.important 和 p["important"] 應(yīng)用到 HTML 文檔時是等價的。

那么，為什么還要有 "~=" 屬性選擇器呢？因?yàn)樗苡糜谌魏螌傩?#xff0c;而不只是 class。

例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基于 title 文檔的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}

這個規(guī)則會選擇 title 文本包含 "Figure" 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。

注意：部分值屬性選擇器，這里的值一定是個完整的word,比如本處的Figure，若使用img[title~="Figu"] {border: 1px solid gray;}則css失效，部分匹配失敗。

子串匹配屬性選擇器

下面為您介紹一個更高級的選擇器模塊，它是 CSS2 完成之后發(fā)布的，其中包含了更多的部分值屬性選擇器。按照規(guī)范的說法，應(yīng)該稱之為“子串匹配屬性選擇器”。

很多現(xiàn)代瀏覽器都支持這些選擇器，包括 IE7。

下表是對這些選擇器的簡單總結(jié)：

類型

描述

[abc^="def"]

選擇 abc 屬性值以 "def" 開頭的所有元素

[abc$="def"]

選擇 abc 屬性值以 "def" 結(jié)尾的所有元素

[abc*="def"]

選擇 abc 屬性值中包含子串 "def" 的所有元素

可以想到，這些選擇有很多用途。

舉例來說，如果希望對指向 W3School 的所有鏈接應(yīng)用樣式，不必為所有這些鏈接指定 class，再根據(jù)這個類編寫樣式，而只需編寫以下規(guī)則：

a[href*="w3school.com.cn"] {color: red;}

感嘆：強(qiáng)大的屬性模糊匹配呀。

總結(jié)

以上是生活随笔為你收集整理的html 模糊匹配,CSS 属性选择器 模糊匹配的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。