html - 无法从列表中删除 CSS 元素符号

Question

我正在与 CSS 打交道，不知道如何删除元素符号。是的，我知道这听起来很简单，但请听我说完。我有另一个来 self 们公司办公室的外部 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属性，

然后在您的 CSS 中使用 id 作为选择器。使用 id 作为选择器比使用 class 或元素类型更具体。它是一个很有用的工具，可以消除您可能从其他地方继承的一堆样式。

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

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

用 id 属性集将所有您的 HTML 包装在 div 中。

这是我经常做的。它允许我在我的 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是为了。