12

我正在与 CSS 打架，但不知道如何删除子弹。是的，我知道这听起来很简单，但请听我说完。我有另一个来自我们公司办公室的外部 CSS 文件，其中的样式阻碍了我的生活，我无法弄清楚如何覆盖它们。我已经尝试了 !important 令牌，但它也不起作用。我正在使用 chrome，但检查员还没有帮助我弄清楚是什么原因造成的。无论如何，这是我的代码，它可以很好地独立运行，但是一旦我将公司 CSS 文件放在那里，愚蠢的子弹又回来了。啊!

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

9 回答 9

22

这听起来更像是CSS 特异性的问题。您不能“覆盖”其他样式，就其本身而言，您只能创建更具体的其他样式。在不知道其他 CSS 长什么样的情况下，通常有三种方法可以做到这一点：

内联样式

就像你在你的例子中一样。这些是最具体的，因此可以保证它们可以工作，但也可以保证它们在工作时会让人头疼。通常，如果您使用这些，则需要修复某些内容。

向无序列表添加一个id属性，

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

使用属性集将所有HTML包装在 a 中。divid

这是我通常做的。它允许我在我的 CSS 样式中使用div它，以确保我的样式始终优先。另外，这意味着我只需要选择一个有意义的名称，然后我就可以像往常一样设置 HTML 的其余部分。这是一个例子：idid

<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的用途。

于 2012-05-17T21:42:19.133 回答
6

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

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

希望它可以帮助某人。

于 2012-11-26T21:08:41.357 回答
3

确保您尝试覆盖的规则在 UL 上，而不是在 LI 上。我已经看到该规则适用于 LI，并且像上面那样覆盖 UL 将无效。

于 2012-05-17T21:20:56.580 回答
1

我的情况类似于@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;
}

因此，要对以前的一些答案进行一些澄清：

  • 列表样式类型在 ul
  • li 上的背景图像
于 2013-10-29T11:05:29.790 回答
0

诀窍很简单：

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/

于 2015-02-07T20:53:13.580 回答
0

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

<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;
}
于 2012-05-17T21:32:00.180 回答
0

好问题; 即使使用 list-style:none; 项目符号在 IE 中的显示方式也很奇怪。

这是删除项目符号的代码：

/* 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;
    }
}
于 2016-02-03T16:51:49.053 回答
0

检查您的 css 中的以下代码行：

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

那是我的罪魁祸首

于 2018-11-16T05:48:24.967 回答
-1

我认为您也可以通过使用 span 将文本包装在列表项中来解决您的问题，然后使用以下内容：

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

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

奇数和偶数是可用于匹配索引为奇数或偶数的子元素的关键字，并且 display=none 将通过不在 span 元素之前显示元素来解决问题。

于 2016-04-17T15:06:30.053 回答