html模糊匹配,CSS属性选择器模糊匹配的使⽤
转⾃：
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进⾏选择，则需要使⽤波浪号(~)。
假设您想选择 class 属性中包含 important 的元素，可以⽤下⾯这个选择器做到这⼀点：
p[class~="important"] {color: red;}
如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p["important"] 应⽤到 HTML ⽂档时是等价的。
那么，为什么还要有 "~=" 属性选择器呢？因为它能⽤于任何属性，⽽不只是 class。
例如，可以有⼀个包含⼤量图像的⽂档，其中只有⼀部分是图⽚。对此，可以使⽤⼀个基于 title ⽂档的部分属性选择器，只选择这些图⽚：
cssclass属性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"] {color: red;}
感叹：强⼤的属性模糊匹配呀。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。