css属性选择器模糊匹配


CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

先上总结:

"value 必须是完整单词" 类型的比较符号: ~=, |=

"value 可以是拼接字符串" 类型的比较符号: *=, ^=, $=

 

1. attribute 属性中包含 value: 

[attribute~=value] 属性中包含独立的单词为 value,例如:

[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行,例如:

[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2. attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开:,例如:

[lang|=en] --> <p lang="en"><p lang="en-us">

[attribute^=value] 属性的前几个字母是 value 就可以,例如:

[lang^=en] --> <p lang="ennn">

3. attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以,例如:a[src$=".pdf"]

4. class 类模糊匹配

类没有单独的模糊匹配选择器,只能使用属性的模糊匹配选择器

  [class*=“icon”] 包含icon的class
  [class^=“icon”] 以icon开头的class
  [class$=“icon”] 以icon结尾的class
  [class~=“icon”] 包含icon完整单词的class
  [class|=“icon”] 是icon或者以icon-开头的class

 
 
 



出处: CSS属性选择器


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM