如果它位于另一个.gif旁边，则隐藏.gif

Question

我有一个服务，人们可以上传他们的图像，我在我的网站上显示它们。我希望自动隐藏.gif，如果它已在另一个.gif旁边上传。

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

这是一个图片示例..

如果一行中有三个.gifs，则只显示第一个。

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

img > .gif{
    display:none;
}

我是否需要使用JavaScript或jQuery来实现这一目标？

Answer 1

您可以使用纯CSS 执行此操作 - 无需Javascript / jQuery！

结合使用attribute selector和direct adjacent combinator：+ ¹

这会在display:none;之后立即在gifs上设置.gif。因此，不会有两个.gifs出现在彼此旁边。

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

jsFiddle demo here!

---

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

Answer 2

只需写下：

.gif + .gif {
    display: none;
} 

Answer 3

你可以使用@Tomzan对CSS Selector的回答：Element + Element（因为声誉不佳而无法发表评论）[http://www.w3schools.com/cssref/sel_element_pluss.asp]：

.gif + .gif { display: none; } 

OR没有自定义类@ yours CSS（http://www.w3schools.com/cssref/sel_attr_contain.asp）：

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

从W3c获取此答案的所有CSS选择器：

  

注意：要使元素+元素在IE8及更早版本中工作，＆lt; ！DOCTYPE＆GT;   必须宣布。

<强>更新 第一种，使用CSS类适用于IE7：http://msdn.microsoft.com/en-us/library/ie/aa358818(v=vs.85).aspx