CSS 属性选择器

[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属性选择器如下:

  1. [attribute^ = "one"]匹配属性值中以指定值-"one" 的开头每个元素
  2. [attribute~ = "two"] 选取属性值中包含指定词汇-"two" 的元素
  3. [attribute| = "three"]  选取带有以指定值-"three" 开头的属性值的元素,该值必须是整个单词
  4. [attribute$ = "four"] 匹配属性值以指定值-"four" 结尾的每个元素
  5. [attribute* = "five"] 匹配属性值中包含指定值-"five" 的每个元素

所有主流浏览器都支持 [attribute^ = value] 选择器。

注释:对于 IE8 及更早版本中的 [attribute^ = value],必须声明 <!DOCTYPE>。

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: