覆盖用户代理样式表 - Chrome

Question

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

请看这张图片。

任何人请帮我覆盖它。

我已经搜索了论坛，但我只知道如何从控制台打开它off，而不是过度使用它。

Answer 1

您看到的是“用户代理样式”（它显示“用户代理样式表”作为源）。
UA 样式是由您的浏览器引入的样板规则，以便在网页之间具有一定的一致性。您可以简单地覆盖它。

样式声明可以来自多个地方，并且根据来源具有不同的优先级（从最低到最高）*：

名称│来源 ────────────┼──────────────────── 用户代理 │ 浏览器 作者│你（内容创作者） 用户│最终用户（使用您网站的人） 优先级│来源 ────────────┼────────────────────────────────────── ────────────────────────────── 最低 0 │ 用户代理样式 => 这些是您在屏幕截图中看到的样式 1 │ 用户风格 2 │ 作者 CSS 样式 => 小心 CSS 优先规则（链接如下）！ 3 │ 作者内联样式 4 │ 使用 `!important` 编写 CSS 样式 5 │ 作者内联样式与 `!important` 最高 6 │ 带有 `!important` 的用户样式

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

ul { padding:0 }

旁注：如您所见，用户样式具有最高优先级。因此，如果用户使用!important 声明自己的样式，作为作者，您无能为力，您不能否决这些样式。 （这是有道理的，因为作为最终用户，我想知道我对浏览器的外观有最终决定权。

^{* 在现实生活中，级联性质比下面的列表显示的更复杂，但为了简单起见，我没有涵盖它。有兴趣的可以关注CSS precendence.}

Answer 2

只需添加以下样式：

ul { padding:0 } 

这将覆盖默认样式。