如何在 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:40:04  来源:igfitidea点击:

How do I remove a specific bullet point within a ul in CSS?

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

jsFiddle here.

jsFiddle在这里。

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:

现在看来您想为最后一个孩子隐藏它,您可以改用最后一个孩子选择器:

New jsFiddle here.

新 jsFiddle 在这里。

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;
}