Html 使用 CSS 隐藏 ul 中的第一个 li
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15158972/
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
Hide first li in ul with CSS
提问by Merec
I have a navigation menu that I'd like to hide the first item in it. e.g.
我有一个导航菜单，我想隐藏其中的第一项。例如
<ul>
<li>Home</li>
<li>About</li>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I then hide the first element like this in CSS:
然后我在 CSS 中隐藏这样的第一个元素：
li:first-child{
visibility: hidden;
}
But then what happens is that all the first li items in the navigation disspears, like 'Item 1' in the navigation menu. How would I select onlythe 'home' li item and hide it?
但是接下来会发生的是，导航中的所有第一个 li 项目都消失了，例如导航菜单中的“项目 1”。我将如何仅选择“家”li 项目并将其隐藏？
回答by Merec
Give your first ul a class "yourclass", then .yourclass > li:first-child { visibility: hidden; }
给你的第一个 ul 一个班级“你的班级”，然后 .yourclass > li:first-child { visibility: hidden; }
To hide the first child of the second ul use .yourclass > li > ul > li:first-child
隐藏第二个 ul 的第一个孩子使用 .yourclass > li > ul > li:first-child
回答by Techmonk
Assign a id to the first ul and then apply the css style to that id only?
为第一个 ul 分配一个 id，然后仅将 css 样式应用于该 id？
<ul id="someid">
<li>Home</li>
<li>About</li>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
#someid > li:first-child{
visibility: hidden;
}
回答by PSR
<ul id="abc">
<li>Home</li>
<li>About</li>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
#abc > li:first-child{
display: none;
}
回答by Michael
ul > li:first-child { (note you can do :last-child to target the last item)
display: none;
}
Another option, especially if you need to target other children for other reasons is to use :nth-child(). Inside the parentheses you put a number http://www.w3schools.com/cssref/sel_nth-child.asp
另一种选择，特别是如果您出于其他原因需要针对其他孩子时，是使用 :nth-child()。在括号内输入一个数字http://www.w3schools.com/cssref/sel_nth-child.asp
Using nth-child to mimick the same as the above.
使用 nth-child 模仿与上面相同。
ul > li:nth-child(1) {
display: none;
}
Note that nth-child is not supported by IE without a jquery library like modernizr to help it out.
请注意，如果没有像 modernizr 这样的 jquery 库来帮助它，IE 不支持 nth-child。
回答by Milche Patern
You would need the element or class which is above the first ul, then specify
您需要第一个 ul 上方的元素或类，然后指定
css soluce : {parent-selector} > ul > li.
css soluce : {parent-selector} > ul > li.
jQuery soluce : $( "ul > li" );
jQuery 解决方案 : $( "ul > li" );
回答by vitaminRAD
I would consider using:
我会考虑使用：
body> ul>:first-child {
display: none;
}
Rather than:
而不是：
ul li:first-child{
visibility: hidden;
}
