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

Question

我有三个div同名class，我想隐藏第一个和最后一个div。

我的代码：

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

现在我想隐藏 div1 和 div3。事实上我想要这个 output 在浏览器中：

div2

我该怎么做？

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

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

Answer 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");
     }

}

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

Answer 2

使用这个简单的 CSS:

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

FIDDLE: https://jsfiddle.net/lmgonzalves/aLaw2qj5/

Answer 3

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

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

Answer 4

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

可能是更好的解决方案

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

Answer 5

这是一个解决方案，它只针对带有 class 的三个 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 兼容。

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

how to hide first and last element from the three same element

html

css

css-selectors