Welcome, Old Sport!

CSS3属性选择器 – 文件类型

by ilikecss ON 2012/07/03 5569

CSS3属性选择器 - 文件类型CSS3的属性选择器是非常有用的功能,只要元素有类似的href,src的属性我们就可加以利用来实现功能,此类功能可以大量减少多余CSS。其实从CSS2.1开始选择器就已经开始使用,这里我介绍一款CSS3新增选择器的使用方法,指定文件类型的选择方法,个人觉得非常实用。

我们知道文件扩展名以表示该文件的类型,所以在CSS3里面可以用语法[attr$=”value”]来进行选择(attr即属性,value则是值),看下面的Demo

上面的例子是以图片后缀来做选择的,gif图片是紫色背景,jpg图片则是蓝色背景。使用了这种文件类型选择器后的CSS代码可以方便你整体替换,不用一个个再去命名了,下面是选择器代码:

img[src$=".gif"]   figcaption {
    background-color: #8960A7; // gif背景色
}
img[src$=".jpg"]   figcaption {
    background-color: #389ABE; // jpg背景色
}

以上选择器请灵活运用,属性可以进行变更,比如a[href$=”.jpg”]等。

7条评论
  1. #1

    客车说道:

    很多习惯都需要改变的,CSS3 和html5 慢慢的也是主流啊!

  2. #2

    zwwooooo说道:

    我还只是玩玩简单的属性。

  3. #3

    某人说道:

    目前 还停留在css2.0阶段。




TOP