如果 .gif 在另一个 .gif 旁边，则隐藏它答案

【问题标题】：Hide a .gif if it is beside another .gif如果 .gif 在另一个 .gif 旁边，则隐藏它
【发布时间】：2013-09-24 21:31:29
【问题描述】：

我有一项服务，人们可以上传他们的图片，并将它们显示在我的网站上。如果.gif 上传到另一个.gif 旁边，我想自动隐藏它。

我不希望这影响以.png 或.jpg.. 结尾的图像。仅.gifs。

这是一个图像示例..

如果连续三个.gifs，只显示第一个。

我试过选择它并隐藏它，但这根本不起作用。

img > .gif{
    display:none;
}

我需要使用 JavaScript 或 jQuery 来实现吗？

【问题讨论】：

【解决方案1】：

您可以使用@Tomzan 对 CSS 选择器的回答：元素 + 元素（由于声誉低，我无法发表评论）[http://www.w3schools.com/cssref/sel_element_pluss.asp]：

.gif + .gif { display: none; }

img[src*=".gif"] + img[src*=".gif"] {display: none}

来自 W3c 对于这个答案的所有 CSS 选择器：

注意：要在 IE8 和更早版本中使用元素+元素，必须声明。

【讨论】：

【解决方案2】：

只要写：

.gif + .gif {
    display: none;
}

【讨论】：

【解决方案3】：

您可以使用 纯 CSS 做到这一点 - 无需 Javascript/jQuery！

这将在紧跟.gif 之后的任何gifs 上设置display:none;。因此，不会有超过两个.gifs 出现在彼此旁边。

img[src$=".gif"] + img[src$=".gif"] { 
    display:none;
}

¹_{IE8及以下属性选择器和直接相邻组合器的使用为not fully supported。}

【讨论】：

很好地使用“属性以”选择器结尾，但这不会隐藏除第一个 gif 之外的所有内容吗？我认为 OP 需要澄清。
根据提供的图片。
@WesleyMurch 感谢您的帮助。连续 3 个应该只显示最后一个
+1 用于，呃，催眠生成的化身。请注意，您不能编写一个动态选择器，它会在另一个具有相同属性值的元素之后选择具有该属性值的元素 - 如果您需要将此应用于所有图像格式，则需要为每种格式重复选择器。