码迷,mamicode.com
首页 > Web开发 > 详细

css属性选择器*=,|=,^=,$=,*=的区别 (学习笔记)

时间:2017-01-22 16:39:35      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:tor   title   包含   begin   符号   jpg   art   .com   ref   

先上总结:

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

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

 

1.attribute属性中包含value: 

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

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

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

    e.g:[title~=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

 

2.attribute属性以value开头:

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

    e.g:[lang|=en]     -->  <p lang="en">  <p lang="en-us">

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

    e.g:[lang^=en]    -->  <p lang="ennn">

 

3.attribute属性以value结尾:

  [attribute$=value] 属性的后几个字母是value就可以

    e.g:a[src$=".pdf"]

css属性选择器*=,|=,^=,$=,*=的区别 (学习笔记)

标签:tor   title   包含   begin   符号   jpg   art   .com   ref   

原文地址:http://www.cnblogs.com/gugege/p/6340422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!