首页 > Web开发 > 详细

CSS属性选择器

时间:2019-12-11 12:17:21      阅读:70      评论:0      收藏:0      [点我收藏+]

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

先上总结:

"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"]

 

CSS属性选择器

原文:https://www.cnblogs.com/planetwithpig/p/12021554.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!