Html 无法从列表中删除 CSS 项目符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10643530/
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
Unable to remove CSS bullets from list
提问by noctufaber
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
我正在与 CSS 作斗争，但不知道如何删除项目符号。是的，我知道这听起来很简单，但请听我说完。我有另一个来自我们公司办公室的外部 CSS 文件，它的样式妨碍了我的生活，我无法弄清楚如何覆盖它们。我已经尝试了 !important 令牌，但它也不起作用。我正在使用 chrome，但检查员还没有帮助我找出导致它的原因。无论如何，这是我的代码，它可以很好地独立运行，但是一旦我将公司 CSS 文件放在那里，愚蠢的子弹就会回来。啊!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
回答by Richard Jones
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
这听起来更像是CSS 特异性的问题。您不能“覆盖”其他样式本身，您只能创建更具体的其他样式。在不知道其他 CSS 是什么样子的情况下，通常有三种方法可以做到这一点：
Inline styles
内联样式
Exactly like you have in your example. These are mostspecific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
就像你在你的例子中一样。这些是最具体的，因此可以保证它们有效，但也可以保证使用它们会让人头疼。通常，如果您正在使用这些，则需要修复一些问题。
Add an idattribute to the unordered list,
id向无序列表添加一个属性，
Then use the idas a selector in your CSS. Using an idas a selector is more specific than using a classor an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
然后id在 CSS中将用作选择器。使用 anid作为选择器比使用 aclass或元素类型更具体。它是一个有用的工具，可以删除您可能从其他地方继承的一堆样式。
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of yourHTML in a divwith the idattribute set.
总结所有的HTML在div与id属性集。
This is what I usually do. It allows me to use that divwith it's idin my CSS styles to make suremy styles always take precedence. Plus, it means I only have to choose one meaningful idname, then I can just style the rest of my HTML as I normally would. Here's an example:
这是我通常做的。它允许我在我的 CSS 样式中div使用它id，以确保我的样式始终优先。另外，这意味着我只需要选择一个有意义的id名称，然后我就可以像往常一样设置其余 HTML 的样式。下面是一个例子：
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapperat the beginning of each of your styles, but that's what SASSis for.
使用这种技术是一种很好的方法，可以确保您将大部分时间花在处理自己的样式上，而不是试图调试其他人的样式。当然，您必须将div#wrapper每个样式放在开头，但这就是SASS的用途。
回答by fankoil
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
我也遇到了同样的问题，我正在尝试更改joomla网站的CSS，最后发现li有一个子弹的背景图像......（模板是JAT3）。这是代码：
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
希望它可以帮助某人。
回答by steve_c
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
确保您尝试覆盖的规则在 UL 上，而不是在 LI 上。我已经看到该规则适用于 LI，并且如上所述覆盖 UL 将不起作用。
回答by Scott C Wilson
My situation is similar to the one described by @fankoil: my inherited css had
我的情况类似于@fankoil 描述的情况：我继承的 css has
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
为了摆脱这个特定的 ul，我给了 ul 一个 id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
并在 css 中，关闭此特定 ul 的背景图像
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
因此，要对之前的一些答案进行一些澄清：
- list-style-type is on ul
- background-image in on li
- list-style-type 在 ul 上
- 背景图片在李
回答by StackBuck
The Trick is very simple:
技巧很简单：
HTML get that:
HTML得到：
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
风格得到：
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
但是，接下来的两个选项会让您大吃一惊：
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
我们限制宽度并强制 li 段落向左移动！
See a Awesome example here: http://jsfiddle.net/467ovt69/
在这里看到一个很棒的例子：http: //jsfiddle.net/467ovt69/
回答by Catto
Good question; it's odd how the bullets show in IE even with the list-style:none;
好问题; 即使使用 list-style:none，项目符号在 IE 中的显示方式也很奇怪；
This is the code that removed the bullets:
这是删除项目符号的代码：
/* media query only applies style to IE10 and IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
回答by Yisela
It's better if instead of having the style inline you call it using a class:
最好不要使用内联样式，而是使用类来调用它：
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !importantproperty. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
如果找不到覆盖您的样式，则可以使用!important属性。最好先使用 chrome 或 firefox 的 Inspect 元素（或 firebug）在线检查您的代码。
EDIT:
编辑：
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
根据您的评论，样式来自 div#wrapper ul。你试过了吗：
div#wrapper ul {
list-style-type:none !important;
}
回答by bob
check for the following line of code in your css:
检查您的 css 中的以下代码行：
.targeted-class-name>ul>li>a:before {
content: "?";
}
That was the culprit in my case
那是我案件的罪魁祸首
回答by JMMaguigad
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
我认为你也可以通过用 span 在你的列表项中包装文本然后使用这样的东西来解决你的问题：
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.
奇数和偶数是可用于匹配索引为奇数或偶数的子元素的关键字，而 display=none 将通过不在跨度元素之前显示元素来实现这一目标。
