如何隐藏三个相同元素的第一个和最后一个元素答案

【问题标题】：how to hide first and last element from the three same element如何隐藏三个相同元素的第一个和最后一个元素
【发布时间】：2015-08-22 04:53:09
【问题描述】：

我有三个具有相同类名的 div，我想隐藏第一个和最后一个 div。

我的代码：

<div class="clsname">div1</div>
<div class="clsname">div2</div>
<div class="clsname">div3</div>

现在我想隐藏 div1 和 div3。事实上，我希望在浏览器中使用这个输出：

div2

我该怎么做？

为了澄清，我想要这样的东西：（这只会隐藏 div3 ）

div.clsname + div.clsname + div.clsname {display:none;}

【问题讨论】：

您可以向 div1 和 div3 添加一个新类，并对其应用{display:none;} 规则。
这取决于你的标记的其余部分。 CSS 中有 NO :first-of-class/:last-of-class 的东西。
@HashemQolami 你是这么假设的，但他从来没有要求过。

标签： html css css-selectors

【解决方案1】：

您可以通过以下方式实现此目的

var elements = jQuery(".clsname");
for (var i = 0 ; < elements.length; i++) {
     if( i == 0 || i = elements.length -1) {
           jQuery(element[i]).style("display" : "none");
     }

}

这将隐藏具有特定类的第一个和最后一个元素。

【讨论】：

难道不能通过 CSS 做到这一点吗？
是的。正如 lmgonzalves 所说
谢谢老哥，我想知道div.clsname:first-child会支持什么版本的浏览器？
它应该适用于所有浏览器。请参考“w3schools.com/cssref/sel_firstchild.asp”
为什么不使用原生 JavaScript 而不是 jQuery？您可以简单地遍历 document.getElementsByClassName("clsname") 以匹配正确的元素，

【解决方案2】：

使用这个简单的 CSS：

div.clsname:first-child, div.clsname:last-child{
    display:none;
}

小提琴：https://jsfiddle.net/lmgonzalves/aLaw2qj5/

【讨论】：

所有现代浏览器，包括 IE9+。看看stackoverflow.com/questions/7938521/…。
:last-child 在 IE
@HashemQolami 如果三个 div 是父级中唯一的子级，则此方法有效。在这种情况下，问题中的 OP 解决方案（使用加号）将解决缺少的 :last-child 问题。
用 html 标签过度限定选择器也很糟糕，不是最佳实践

【解决方案3】：

lmgonzalves 可以是一个有效的答案。但是你没有显示所有的标记，所以 Hashem Qolami 是对的，它不可能是你想要的。

可能是更好的解决方案

.clsname, .clsname + .clsname + .clsname { display: none;}
.clsname + .clsname { display: block;}

【讨论】：

【解决方案4】：

div.clsname:first-child{
  display:none;
}

div.clsname:last-child{
 display:none;
}

【讨论】：

@lmgonzalves 如果 div.clsname 与其父级的第一个或最后一个 child 不完全匹配，则这两个答案都不起作用。跨度>

【解决方案5】：

这是一个解决方案，它只针对类中的三个 div，而不理会其他 div。（所以它可以在中间有或没有其他 div 的情况下工作。）

div.clsname, div.clsname ~ div.clsname ~ div.clsname {display:none}
div.clsname ~ div.clsname {display:block}

<div>Other div, displayed normally</div>
<div class="clsname">div1</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div class="clsname">div2</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div class="clsname">div3</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>

兼容所有现代浏览器，甚至 IE8。

【讨论】：