css 属性选择器

css2的属性选择器

1.[class~="flower"]：选中有flower的class

　　class="flower ss" 

　　class="ss flower"

2.[class|='top']：选择以top为top开头的class需要有'—'相连 或者单独的top

　　class="top-ss"

　　class="top"

　　class="top-ss"//选不中

3.[class^="top"]:选中以top为开头的不管有没有特殊符号相连，单独的top也可以

　　class="top-ss"

　　class="topss"

4.[class$="top"]:选中以top为结束的class,单独的top也行

　　class="mytop"

　　class="my-top"

　　class="top"

5.[class*='tt']:选中有tt两个字母的class不管其位置在哪里

　　class="sttd"

　　class="ttee"

　　class="eett"

6.[target=_blank]

   a标签中有target =_blank的选中

7.input[type="button"]

 

 

css3的属性选择器正则选择：

 

• 字符^表示字符串开始位置匹配；
• 字符$表示字符串结束位置匹配；
• 字符*表示字符串任意位置匹配；
• 字符i表示字符串匹配不区分大小写；
• 字符g表示字符串全局匹配；

[foo^='bar']：开始位置有bar字符

<div foo="barss></div>

[foo$='bar']:结束位置有bar字符

<div foo='ssbar'></div>

[foo*='bar']:任何位置有bar字符

<div foo="sbarss"></div>

[foo*='bar' i]:任何位置有bar字符,不区分大小写

<div foo='ssBar'></div>