如何在 CSS 中删除 ul 中的特定项目符号?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16286921/
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
How do I remove a specific bullet point within a ul in CSS?
提问by Chris
I have a simple list and all I want to do is remove a specific bullet point (just the icon, not the content within the li) within the ul
.
我有一个简单的列表,我想要做的就是删除ul
.
I've used first-child to take away the first but I'd like to remove the sixth bullet point!
我已经用 first-child 拿走了第一个,但我想删除第六个要点!
I could so it inline but I'd prefer to do it with CSS.
我可以让它内联,但我更喜欢用 CSS 来做。
How can I do this?
我怎样才能做到这一点?
回答by dsgriffin
You can use the nth-childselector to achieve this.
您可以使用nth-child选择器来实现这一点。
li:nth-child(6) {
list-style-type: none;
}
Edit:
编辑:
It now seems you want to hide it for the last child, you can use the last-child selector instead:
现在看来您想为最后一个孩子隐藏它,您可以改用最后一个孩子选择器:
li:last-child {
list-style-type: none;
}
If you'd like to get either of these working in IE6-8, you could use Selectivizr.
如果您想让其中任何一个在 IE6-8 中工作,您可以使用Selectivizr。
"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8"
“Selectivizr 是一种 JavaScript 实用程序,可模拟 Internet Explorer 6-8 中的 CSS3 伪类和属性选择器”
nth-child and last-child are some of those supported selectors in Selectivizr.
nth-child 和 last-child 是 Selectivizr 中支持的一些选择器。
回答by Kevin Lynch
Use nth-child DEMO http://jsfiddle.net/L8VW4/
使用 nth-child DEMO http://jsfiddle.net/L8VW4/
This will remove the list item
这将删除列表项
li:nth-child(6) {
display: none;
}
This will remove only the bullet icon present beside the list item and leave the list item itself in place
这将仅删除列表项旁边的项目符号图标,并将列表项本身保留在原位
li:nth-child(6) {
list-style: none;
}