[attribute^ = value]:这是 css 属性选择器的一种 ,用来匹配属性值以指定值开头的每个元素。例如:
[class$="box"] { background : #81D8D0; }
表示设置 class
属性值以 "box" 结尾的所有元素(div、span、p、li等元素)的背景色,也就是说对<div class="first-box">,<span class="second-box">,<p class="third-box">的元素都是有效的。
另一种情况如:
span [class$="box"] { background : #81D8D0; }
则表示设置 class
属性值以 "box" 结尾的 span 的元素(只作用于 span 元素)的背景色,也就是说对<div class = "first-box">和<p class = "third-box">的元素是无效的。在"[ ]"前加元素类别可以选择只对某一类元素进行样式设置。
除此之外,还有一些常用的css属性选择器如下:
[attribute^ = "one"]
匹配属性值中以指定值-"one" 的开头每个元素[attribute~ = "two"]
选取属性值中包含指定词汇-"two" 的元素[attribute| = "three"]
选取带有以指定值-"three" 开头的属性值的元素,该值必须是整个单词[attribute$ = "four"]
匹配属性值以指定值-"four" 结尾的每个元素[attribute* = "five"]
匹配属性值中包含指定值-"five" 的每个元素
所有主流浏览器都支持 [attribute^ = value] 选择器。
注释:对于 IE8 及更早版本中的 [attribute^ = value],必须声明 <!DOCTYPE>。
2018年04月04日 07:56 沙发
换个友情链接咋样?
2018年04月23日 17:50 板凳
OK