Html 覆盖用户代理样式表 - Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20116148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override USER AGENT STYLE SHEET - Chrome
提问by Unknown User
I've got a list item that is being displayed on the webpage using the hover effect. Challenge i'm facing here is when i apply some border or background to the list item, it looks horrible because of the padding that is being generated automatically.
我有一个使用悬停效果显示在网页上的列表项。我在这里面临的挑战是当我对列表项应用一些边框或背景时，由于自动生成的填充，它看起来很糟糕。
Look at this image please.
请看这张图。
Anyone please help me to override it.
任何人请帮我覆盖它。
I already searched the forums but i only got how to turn it offfrom the console not to over ride it.
我已经搜索了论坛，但我只知道如何从控制台关闭它而不是过度使用它。
回答by Christoph
What you are seeing there is a "user agent style" - boilerplate rules that are introduced by your browser to have some conformity across web pages. You can simply override it.
您所看到的是“用户代理风格” - 浏览器引入的样板规则，以便在网页之间具有一定的一致性。您可以简单地覆盖它。
Stylesheets from different sources have different precedence as follows (from lowest to highest)*:
来自不同来源的样式表具有不同的优先级，如下（从最低到最高）*：
- user agent styles => these are the styles you see in the screenshot
- user styles
- author CSS styles (beware precedence)
- author inline styles
- author styles with
!important - user styles with
!important
- 用户代理样式 => 这些是您在屏幕截图中看到的样式
- 用户风格
- 作者 CSS 样式（注意优先级）
- 作者内联样式
- 作者风格与
!important - 用户样式
!important
user agent = the browser
author = you
user = the browser user
用户代理 = 浏览器
作者 = 你
用户 = 浏览器用户
So for you, all you need, is to declare
所以对你来说，你所需要的，就是声明
ul { padding:0 }
and this will overwrite the UA styles. However, if the user would declare their own styles with !important, there is nothing you can do about it as author - (luckily for the user) you cannot overrule those styles.
这将覆盖 UA 样式。但是，如果用户使用 声明他们自己的样式!important，作为作者，您无能为力 - （对用户来说幸运的是）您不能否决这些样式。
* In real life, the cascading nature is even more complex than this list might imply, which I didn't cover for the sake of simplicity. If you are interested in this, take a look into CSS precendence.
* 在现实生活中，级联性质甚至比这个列表所暗示的更复杂，为了简单起见，我没有涵盖。如果您对此感兴趣，请查看CSS 优先级。
回答by Danield
Just add the following style:
只需添加以下样式：
ul { padding:0 }
That will override the default style.
这将覆盖默认样式。
