如何使用CSS3选择器匹配jpg和png两种后缀格式的图片？

错误原因 #

你使用的img[src$="jpg"][src$="png"]写法属于多属性与逻辑选择器，要求匹配的元素同时满足所有属性筛选条件，不存在一张图片的src同时以jpg和png结尾，因此无法匹配到任何元素。

正确写法 #

jQuery选择器支持通过英文逗号分隔多个独立选择器，实现「或」逻辑的匹配，你只需要将第一行的选择器改为img[src$="jpg"], img[src$="png"]即可，修改后的完整代码如下：

jQuery.each(jQuery('img[src$="jpg"], img[src$="png"]'), function (index, image) {
  if (jQuery(image).width() >= min_width && jQuery(image).height() >= min_height) {
    image_url = jQuery(image).attr('src');
    jQuery('#bookmarklet .images').append('<a href="#"><img src="' + image_url + '" /></a>');
  }
});

扩展说明 #

• 若后续需要匹配其他图片格式，例如.webp、.gif，直接用英文逗号追加对应的img[src$="后缀"]选择器即可
• 注意所有标点均要使用英文格式，避免触发语法错误

内容的提问来源于stack exchange，提问作者Suhail Ahmed