javascript 只显示 div 的第一个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17592873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Only display the first child of a div
提问by michaelw90
I've been struggling with finding a way to only display the first child of my div and hide all the rest. Can this be done purely in css or do I have to involve some Javascript?
我一直在努力寻找一种方法来只显示我的 div 的第一个孩子并隐藏所有其他孩子。这可以完全在 css 中完成还是我必须涉及一些 Javascript？
So, how can I get this to only display first p-tag?
那么，我怎样才能让它只显示第一个 p 标签？
<div id="test1">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
回答by Falguni Panchal
try this
试试这个
CSS
CSS
#test1 p{
display:none;
}
#test1 p:first-child{
display:block;
}
回答by lonesomeday
A combination of :notand first-childshould surely do it:
的组合:not和first-child肯定应该这样做：
#test1 p:not(:first-child) {
display: none;
}
Note that this won't work in IE before version 9.
请注意，这在版本 9 之前的 IE 中不起作用。
回答by MrCode
By using :first-childwrapped in :not():
通过使用:first-child包裹在:not()：
#test1 p:not(:first-child) {
display:none;
}
Note that first-childisn't supported by IE8 or earlier. If you want complete cross browser support, you will have to use Javascript.
请注意，first-childIE8 或更早版本不支持。如果您想要完整的跨浏览器支持，则必须使用 Javascript。
A Javascript solution would be:
一个 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";
}
}
回答by 1321941
#test1 p {
display: none;
}
#test1 p:first-child {
display: block;
}
回答by h2ooooooo
By hiding all the P elements, and then implicitly displaying the first p element:
通过隐藏所有 P 元素，然后隐式显示第一个 p 元素：
#test1 p {
display: none;
}
#test1 p:first-child {
display: block;
}
If a DOCTYPEis declared, this will work in IE7+. Check the browser compatibility here(unlike using :notwhich will only work in IE9unless you use IE7.js)
如果DOCTYPE声明了 a ，这将适用于 IE7+。检查浏览器的兼容性这里（不像使用:not它只会在IE9工作，除非你使用IE7.js）
回答by brbcoding
回答by Xotic750
Try this, should work with IE7+
试试这个，应该适用于 IE7+
CSS
CSS
#test1>p ~ p{
display: none;
}
On jsfiddle
If you need older support then this should be cross-browser.
如果您需要较旧的支持，那么这应该是跨浏览器的。
Javascript
Javascript
var test1 = document.getElementById("test1").getElementsByTagName("p"),
i = 1,
p = test1[i];
while (p) {
p.style.display = "none";
p = test1[i += 1];
}
On jsfiddle
回答by Teemu
In your example you used only pelements, but if there are some other elemens included? In general, to show only the first element, you can use this:
在您的示例中，您仅使用了p元素，但是否包含其他一些元素？通常，要仅显示第一个元素，您可以使用：
#test1 :not(:first-child) {
display: none;
}
Notice this doesn't work in IE<9.
请注意，这在 IE<9 中不起作用。
A fiddle demo.
一个小提琴演示。
回答by San
Have a look at this URL, use psudo element to select particular elements to apply CSS http://www.w3schools.com/CSS/css_pseudo_elements.asp
看看这个 URL，使用 psudo 元素选择特定元素来应用 CSS http://www.w3schools.com/CSS/css_pseudo_elements.asp
回答by Arun Bertil
Try
尝试
#test1 p:not(:first-child)
{
visibility:hidden;
}
