8

我一直在努力寻找一种只显示我的 div 的第一个孩子并隐藏所有其他孩子的方法。这可以纯粹在css中完成还是我必须涉及一些Javascript？

那么，我怎样才能让它只显示第一个 p-tag？

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

http://jsfiddle.net/8XYNx/

4

11 回答 11

12

并且肯定应该:not这样first-child做：

#test1 p:not(:first-child) {
    display: none;
}

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

于 2013-07-11T12:05:25.277 回答
10

尝试这个

http://jsfiddle.net/8XYNx/10/

CSS

  #test1 p{
    display:none;

}
#test1 p:first-child{
    display:block;
}
于 2013-07-11T12:06:43.673 回答
4

通过使用:first-child包裹在:not()：

小提琴

#test1 p:not(:first-child) {
    display:none;
}

请注意，first-childIE8 或更早版本不支持。如果你想要完整的跨浏览器支持，你将不得不使用 Javascript。

Javascript 解决方案是：

小提琴

var div = document.getElementById("test1");
var pList = div.getElementsByTagName("p");

for(var i=0; i<pList.length; i++) {
    if(pList[i] != div.children[0]) {
        pList[i].style.display = "none";
    }
}
于 2013-07-11T12:05:33.197 回答
2 
#test1 p {
    display: none;
}
#test1 p:first-child {
    display: block;
}

http://www.w3.org/TR/CSS2/selector.html#first-child

于 2013-07-11T12:06:24.830 回答
1

通过隐藏所有 P 元素，然后隐式显示第一个 p 元素：

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

演示

如果DOCTYPE声明了 a，这将在 IE7+ 中工作。在此处检查浏览器兼容性（不像 using :notwhich只能在 IE9 中使用，除非您使用IE7.js）

于 2013-07-11T12:05:43.970 回答
1

display: none在除第一个元素之外的每个元素上（1n w/2 偏移量）。

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

演示

于 2013-07-11T12:07:20.040 回答
1

试试这个，应该适用于IE7+

CSS

#test1>p ~ p{
    display: none;
}

在jsfiddle 上

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

Javascript

var test1 = document.getElementById("test1").getElementsByTagName("p"),
    i = 1,
    p = test1[i];

while (p) {
    p.style.display = "none";
    p = test1[i += 1];
}

在jsfiddle 上

于 2013-07-11T12:08:40.250 回答
1

在您的示例中，您仅使用了p元素，但是是否包含其他一些元素？通常，要仅显示第一个元素，您可以使用以下命令：

#test1 :not(:first-child) {
    display: none;
}

请注意，这在 IE<9 中不起作用。

一个小提琴演示。

于 2013-07-11T12:18:46.027 回答
0 
$('#test1 p:not(:first-child)').hide();

演示

于 2013-07-11T12:08:18.100 回答
0

看看这个 URL，使用 psudo 元素选择特定元素来应用 CSS http://www.w3schools.com/CSS/css_pseudo_elements.asp

于 2013-07-11T12:09:13.667 回答
0

尝试

#test1 p:not(:first-child)
{
    visibility:hidden;
}
于 2013-07-11T12:10:35.903 回答