如何覆盖用户代理 CSS答案

【问题标题】：how to override user agent CSS如何覆盖用户代理 CSS
【发布时间】：2013-03-15 08:31:56
【问题描述】：

我想在它的项目旁边有一个没有项目符号的无序列表。我创建了 CSS 属性 list-style-type 并将其设置为 none。当我把它放在 html 元素中时它工作正常：

<ul style="list-style-type: none;">
    <li> item1 </li>
    <li> item2 </li>
</ul>

但是当我把它放在一个单独的 CSS 文件中时，由于用户代理属性 list-style-type: disk;

，它不起作用

我尝试使用 !important 覆盖它，但它再次未被覆盖。这是 google chrome 检查元素的图像，显示用户代理规则已被描边，但此属性的计算值是用户代理值！

更新：css 文件已正确链接。我添加了另一个图像，显示用户代理属性被描边，但它仍然用作最终值：

【问题讨论】：

听起来 CSS 文件没有正确引用。你如何包含 CSS 文件？文件的路径是否正确，还是 CSS 文件的 404 错误？
在我看来似乎可以找到here。您可能会搜索 CSS 重置。
虽然从您的屏幕截图中我认为 oo.css 已正确链接并且样式也设置正确...请显示 css 文件以及如何将 css 文件添加到您的 html 文件中，以便我们可以看看是否可能有一些错误。默认情况下，用户代理样式应始终被定义的任何样式覆盖，即使没有！important....
我从您的图片中注意到您的控制台中有警告（右下角的红色图标）。那是我们看到的 CSS 文件上的 404 吗？
@ChristoferEliasson：文件的路径是正确的（如图所示，我的文件是 oo.css）。我尝试添加另一张显示效果更好的图片，但目前似乎无法上传。

【解决方案1】：

根据这个选择器span.form-error，您正在尝试将list-style-type 属性应用于跨度元素。该属性对span 元素无效，但在您的情况下应直接应用于ul。

作为一个实验，您可以将此规则添加到您的 CSS 文件中，看看这是实际的问题：

ul { list-style-type: none; }

如果可行，那么您可以通过向您的 ul 添加一个类来使您的规则更加具体，并将该类用于您的 css-selector。

【讨论】：

【解决方案2】：

即使没有!important，CSS 也应该覆盖用户代理。此问题可能是由于未在 HTML 中正确链接到 CSS 造成的。

还可以查看style reset。在您的文档中包含此内容将减少浏览器的不一致。

【讨论】：

【解决方案3】：

您的样式表实际上是否通过link element 包含在您的页面中？

<head>
    <link rel="stylesheet" href="MyStylesheet.css" type="text/css">
</head>

用户代理样式表不应优先于您网站的样式表。此外，正如此处其他答案所建议的那样，!important 是不好的做法，在这里根本没有必要。

编辑：我上面引用的另一个答案已被删除。较新的答案建议使用“样式重置”，但这实际上不需要 - 您已经知道要覆盖哪个属性。

【讨论】：