覆盖用户代理样式表 - Chrome

Question

覆盖用户代理样式表 - Chrome

htmlcssgoogle-chrome

20

我有一个列表项，使用悬停效果在网页上显示。我面临的挑战是当我给列表项应用一些边框或背景时，由于自动生成的填充，它看起来很糟糕。

请看这张图片。

请帮助我覆盖它。

我已经搜索了论坛，但只找到了如何从控制台关闭它，而不是覆盖它。

enter image description here

- Unknown User

那么，简单地使用 ul { padding:0 } 呢？ - Danield

1

我刚刚将我的上面的评论添加为答案。 - Danield

可能是重复的问题：chrome：如何关闭用户代理样式表设置？ - givanse

对我来说，在Chrome中，ul {padding:0; margin:0}这个在这里推荐的写法，并不能覆盖掉任何用户代理样式规则，比如margin-block-start，即使加上了!important。你必须在所有五种情况下都完整地写出选择器。 - David Spector

2个回答

14

只需添加以下样式：

ul { padding:0 }

那将覆盖默认样式。

- Danield

谢谢！我花了好几个小时来尝试解决这个问题，幸好我试着用谷歌搜索并找到了这个答案。哈哈 :D - jehzlau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christoph · Accepted Answer

你看到的是一个“用户代理样式”（源显示为“用户代理样式表”）。UA 样式是浏览器引入的样板规则，以实现网页的某种一致性。您可以轻松地覆盖它。

样式声明可以来自多个位置，并具有不同的优先级，具体取决于来源（从最低到最高）*：

名称 │ 来源 ───────────┼───────────────────────── 用户代理 │ 浏览器作者 │ 您（内容创建者）用户 │ 最终用户（使用您的网站的人）

优先级 │ 来源 ───────────┼──────────────────────────────────────────────────────────────────── 最低 0 │ 用户代理样式 => 这些是您在截图中看到的样式 1 │ 用户样式 2 │ 作者 CSS 样式 => 注意 CSS 优先级规则（下面的链接）！ 3 │ 作者内联样式 4 │ 作者 CSS 样式与 `!important` 5 │ 作者内联样式与 `!important` 最高 6 │ 具有 `!important` 的用户样式

由于截图中的样式是 UA 样式（优先级最低），您只需要在 CSS 中声明一个样式规则来覆盖它们：

ul { padding:0 }

顺带一提：正如您所看到的，用户样式具有最高优先级。因此，如果用户使用!important声明了自己的样式，作为作者，您无法覆盖这些样式。(这是有道理的，因为作为最终用户，我希望知道我对浏览器中的外观有最终的决定权)。

^{* 在实际生活中，层叠性质比下面的列表显示的更加复杂，但出于简单起见，我没有涵盖它。如果您有兴趣，请查看CSS 优先级。}