css 属性选择器
2016-07-19 17:24 改吧 阅读(772) 评论(2) 编辑 收藏 举报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>