CSS选择器问题：如何在类中仅定位GIF格式图片？

你的写法错误点 #

• 误用img[href*='.gif']：img标签的图片路径存储在src属性中，href是链接标签<a>的属性，这个选择器根本无法匹配到任何图片元素。
• 误用:target伪类：这个选择器是用来匹配当前URL锚点指向的元素，和图片格式没有任何关联，自然不会生效。

纯CSS实现需求的正确写法 #

完全可以通过CSS实现这个需求，不需要依赖JS。在你的styles.css中添加以下代码即可：

/* 先定义.items下所有图片的基础样式（JPG/PNG等适用） */
.items img {
  width: 200px;
  height: auto;
}

/* 单独设置.items下GIF图片的特殊样式 */
.items img[src*='.gif'] {
  width: 100px;
  height: auto;
}

补充说明 #

• [src*='.gif']是属性包含选择器，会匹配所有src属性里包含.gif字符串的img元素，能精准选中GIF格式的图片。
• 确保index.html里正确引用了CSS文件，比如你的styles.css在_CSS/_name-of-folder/目录下，引用代码应该是：<link rel="stylesheet" href="_CSS/_name-of-folder/styles.css">

内容的提问来源于stack exchange，提问作者K-RAM