无法从列表中删除CSS项目符号

Question

我正在与CSS战斗，无法弄清楚如何移除子弹。是的，我知道这听起来很容易，但是听我说。我有一个来自我们公司办公室的另一个外部CSS文件，它的样式正在阻碍我的生活，我不知道如何覆盖它们。我已经尝试了！important令牌，它也不起作用。我正在使用chrome，检查员还没有帮我找出导致它的原因。无论如何，这里的代码非常独立，但是一旦我把公司的CSS文件放在那里，那些愚蠢的子弹就会回来。啊！

    <ul style="list-style-type:none;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>

Answer 1

CSS specificity这听起来更像一个问题。您不能“覆盖”其他样式，您本身只能创建更具体的其他样式。不知道其他CSS的外观，通常有三种方法可以做到这一点：

内联样式

与你的例子完全一样。这些是大多数特定的，因此它们保证可以正常工作，但它们也可以保证在工作中感到痛苦。通常，如果您正在使用这些，则需要修复某些内容。

将id属性添加到无序列表

然后使用id作为CSS中的选择器。使用id作为选择器比使用class或元素类型更具体。它是一个有用的工具，用于切割一些你可能从其他地方继承的样式。

<ul id="the-one">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

ul#the-one {
  list-style-type: none;
}

在设置了div属性的id中包裹所有您的 HTML。

这就是我通常做的事情。它允许我在我的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;
}

使用该技术是一种非常好的方法，可以确保您将大部分时间用于自己的样式而不是尝试调试其他人的样式。当然，您必须将div#wrapper放在每个样式的开头，但这就是SASS的用途。

Answer 2

我遇到了同样的问题，我试图改变一个joomla网站的CSS，最后发现李的背景图像是一个子弹......（模板是JAT3）。这是代码：

.column ul li {
  background: url(../images/bullet.gif) no-repeat 20px 7px;
  ...
}

希望它有所帮助。

Answer 3

确保您尝试覆盖的规则是UL，而不是LI。我已经看到该规则应用于LI，并且如上所述覆盖UL将不起作用。

Answer 4

我的情况类似于@fankoil描述的情况：我继承的css

main-divname ul li{
  background-image:url('some-image.png');
}

为特定的ul删除这个，我给了ul一个id

<ul id="foo">
...

并在css中关闭了此特定ul的背景图片

ul#foo li {
  background-image: none !important;
}

所以要为之前的一些答案添加一些说明：

• list-style-type在ul
上
• 背景图片in li

Answer 5

最好不要使用内联样式，而是使用类调用它：

<ul class="noBullets">

.noBullets {
list-style-type:none !important;
}

如果找不到覆盖您的样式，可以使用!important属性。最好先使用chrome或firefox的Inspect元素（或firebug）在线检查你的代码。

编辑：

根据你的评论，风格来自div＃wrapper ul。你试过了吗？

div#wrapper ul {
list-style-type:none !important;
}

Answer 6

诀窍非常简单：

HTML得到：

<ul id="the-one">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

风格得到：

ul#the-one {list-style-type: none;}

但是，接下来的两个选项会让你大吃一惊：

li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.

我们限制宽度并强制li段向左移动！

请在此处查看一个很棒的示例：http://jsfiddle.net/467ovt69/

Answer 7

好问题;奇怪的是，如果子弹在IE中显示，即使是list-style：none;

这是删除子弹的代码：

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

Answer 8

在CSS中检查以下代码行：

.targeted-class-name>ul>li>a:before {
    content: "•";
}

那是我的罪魁祸首

Answer 9

我认为您可以通过在带有span的list-item中包装文本来解决您的问题，然后使用类似这样的内容：

ul>li:nth-child(odd) > span:before {
    display:none;
}

ul>li:nth-child(even) > span:before {
    display:none;
}

  

奇数甚至是可用于匹配索引为奇数或偶数的子元素的关键字，而display = none将通过不在span元素之前显示元素来实现。