Javascript 仅显示div的第一个子级

我一直在努力寻找一种方法，只显示我div的第一个孩子，而隐藏其余的孩子。这完全可以在css中完成，还是需要使用一些Javascript

那么，我怎样才能让它只显示第一个p标签呢

<div id="test1">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>

同侧眼睑

同侧眼睑

同侧眼睑

---

将

：not

和

第一个孩子

结合起来肯定可以做到：

#test1 p:not（：第一个孩子）{
显示：无；
}

---

请注意，这在9版之前的IE中不起作用。

使用

:not（）中包装的
:first child
：


请注意，IE8或更早版本不支持第一个孩子。如果您想获得完全的跨浏览器支持，就必须使用Javascript

Javascript解决方案是：


var div=document.getElementById（“test1”）；
var pList=div.getElementsByTagName（“p”）；
对于（var i=0；i，隐藏所有p元素，然后隐式显示第一个p元素：

#test1 p {
    display: none;
}
#test1 p:first-child {
    display: block;
}


如果声明了
DOCTYPE
，这将在IE7+中工作。请检查浏览器兼容性（与使用
：not
不同，除非您使用）

试试这个


CSS

显示：除第一个（1n w/2偏移量）外，每个元素上均无


试试这个

CSS

#test1>p~p{
显示：无；
}

在

如果您需要旧版本的支持，那么这应该是跨浏览器的

Javascript

var test1=document.getElementById（“test1”）.getElementsByTagName（“p”），
i=1，
p=test1[i]；
while（p）{
p、 style.display=“无”；
p=test1[i+=1]；
}

在
上查看此URL，使用psudo元素选择要应用CSS的特定元素
试试看

#test1 p:not(:first-child)
{
    visibility:hidden;
}

在您的示例中，您只使用了
p
元素，但如果包含其他元素？通常，要仅显示第一个元素，您可以使用以下内容：

#测试1：非（：第一个孩子）{
显示：无；
}

请注意，这在IET中不起作用。它的缺点是，在不支持
：first child
（无可否认，这并不多）的浏览器中所有
p
元素都不会显示。@lonesomeday是真的，但与之相比，它仍然得到了更广泛的支持：不是真的，我错了——我误读了Quirksmode页面。这将在比我更多的浏览器中工作。你可以对第一个元素应用一个类来保持CSS的简单。神圣的答案堆积蝙蝠侠。你是说在版本9之前。嗯，pseudo元素是伪元素。您不能使用伪元素选择器来选择元素。“JavaScript是一种动态类型的语言，通常用于客户端脚本。使用此标记可询问有关ECMAScript及其方言/实现（不包括ActionScript）的问题。除非还包括框架/库的标记，否则应提供纯JavaScript答案。”
#test1 p {
    display: none;
}
#test1 p:first-child {
    display: block;
}

#test1 p {
    display: none;
}
#test1 p:first-child {
    display: block;
}

  #test1 p{
    display:none;

}
#test1 p:first-child{
    display:block;
}

#test1 p:nth-child(1n + 2){
display: none;
}

$('#test1 p:not(:first-child)').hide();

#test1 p:not(:first-child)
{
    visibility:hidden;
}