CSS或JQuery中的特定图像扩展选择器

Question

我的项目中有几个图像,有几个扩展名(jpg,png,gif).

有没有办法根据css或JQuery中的扩展选择这些图像.

<img src="img/img.jpg"/>
<img src="img/img1.png"/>
<img src="img/img2.gif"/>

例如,我希望扩展名为.png的图像具有height: 200px;属性.

Answer 1

您可以使用属性以 selector 结尾$=:

$('img[src$=".png"]').height(200);

选择器的末端将错误地错过<img src="test.png?id=1">.

您还可以使用属性包含选择器,*=:

$('img[src*=".png"]').height(200);

该包含选择将不准确选择<img src="test.png.gif" />.

如果文件路径是你必须去的,你就不可避免地要接受这些例外的一个(除非你想实现一些更先进的过滤器,经过剥离值?或#).

Answer 2

您还可以使用CSS3 属性选择器：

img[src$='.png'] {
    height: 200px;
}

浏览器支持

Chrome    Firefox               IE     Opera     Safari
All       1.0 (1.7 or earlier)  7      9         3