我有一项服务，人们可以上传他们的图片，并将它们显示在我的网站上。.gif如果它上传到另一个旁边，我想自动隐藏它.gif。
我不希望这会影响以..结尾.png的图像。.jpg.gifs
这是一个图像示例..
如果.gifs连续三个，只显示第一个。
我试过选择它并隐藏它，但这根本不起作用。
img > .gif{
display:none;
}
我需要使用 JavaScript 或 jQuery 来实现这一点吗？
user2796328
问问题
755 次
3 回答
32
你可以使用纯 CSS来做到这一点——不需要 Javascript/jQuery！
使用属性选择器和直接相邻组合器的组合：+1
这将设置display:none;在任何gifs紧跟在.gif. 因此，不会有超过两个.gifs出现在彼此旁边。
img[src$=".gif"] + img[src$=".gif"] {
display:none;
}
1 IE8 及以下不完全支持属性选择器和直接相邻组合器的使用。
于 2013-09-19T17:00:08.803 回答
10
写吧：
.gif + .gif {
display: none;
}
于 2013-09-19T17:00:16.180 回答
1
您可以使用@Tomzan 对 CSS 选择器的回答：元素 + 元素（由于声誉低，我无法发表评论）[http://www.w3schools.com/cssref/sel_element_pluss.asp]：
.gif + .gif { display: none; }
或者没有自定义类@yours CSS（http://www.w3schools.com/cssref/sel_attr_contain.asp）：
img[src*=".gif"] + img[src*=".gif"] {display: none}
对于这个答案的所有 CSS 选择器，来自 W3c：
注意：要在 IE8 和更早版本中使用 element+element，必须声明 <!DOCTYPE>。
更新 首先，使用 CSS 类适用于 IE7： http: //msdn.microsoft.com/en-us/library/ie/aa358818 (v=vs.85).aspx
于 2013-09-19T20:02:06.287 回答