什么'；重写用户代理CSS样式表规则的最佳方法是什么？该规则为无序列表提供1em边距？_Css_Overriding

什么'；重写用户代理CSS样式表规则的最佳方法是什么？该规则为无序列表提供1em边距？

css

什么'；重写用户代理CSS样式表规则的最佳方法是什么？该规则为无序列表提供1em边距？,css,overriding,Css,Overriding,我正在开发一个网页应用程序，它的顶部有一个类似于facebook的蓝色条。我在该条的div中有一个无序列表，列出了一些项目，如收件箱、通知等。UL有一个1em的边距，由我的浏览器的用户代理样式表定义。这是一个问题，因为它将我的顶杆向下推了1米。我如何覆盖此项以使ul的边界为0？我已经读到，覆盖用户代理样式表是一个坏主意，所以我很想知道什么是最好的做法。谢谢编辑：以下是CSS文件： body { margin:0px; padding:0px; } #topBar{ backgrou

我正在开发一个网页应用程序，它的顶部有一个类似于facebook的蓝色条。我在该条的div中有一个无序列表，列出了一些项目，如收件箱、通知等。UL有一个1em的边距，由我的浏览器的用户代理样式表定义。这是一个问题，因为它将我的顶杆向下推了1米。我如何覆盖此项以使ul的边界为0？我已经读到，覆盖用户代理样式表是一个坏主意，所以我很想知道什么是最好的做法。谢谢

编辑：以下是CSS文件：

body {

margin:0px;
padding:0px;
}

#topBar{
    background-color:#CCCCCC;
    height: 50px;
    width:100%;
    z-index:-1;

}

#mainNav{
    margin:0 auto;
    width:900px;
}
#logo{
    float:left;
}

#mainNav ul li{
    float:left;
    border:0px; 
    margin:0;
    padding:0;
    font-size:10px
}

以及html：

<!DOCTYPE html>
<html>
    <head>
        <title>ff</title>
        <%= stylesheet_link_tag :all %>
        <%= javascript_include_tag :defaults %>
        <%= csrf_meta_tag %>
    </head>
    <body>
        <div id="topBar">
            <div id="mainNav">
                <div id="logo"><%=image_tag("livecove.jpg") %></div>
                <ul>
                    <li>Inbox</li>
                </ul>
            </div>
        </div>

        <%= yield %>
    </body>
</html>


ff

收件箱

在您自己的样式表中编写的所有内容都会覆盖用户代理样式-这就是编写您自己的样式表的目的。

如果您能够编辑有问题的样式表如果用户代理样式表的样式给它应该修复的浏览器带来了问题，那么您可以尝试删除有问题的样式并进行测试，以确保它不会在其他地方产生任何意外的不利影响

如果没有，请使用修改后的样式表。修正浏览器的怪癖是这些表单的目的——它们修正了问题，不应该引入新的问题

如果您无法编辑有问题的样式表

如果您无法编辑包含违规行的样式表，您可以考虑使用<代码>！重要的关键字

例如：

.override {
    border: 1px solid #000 !important;
}

.a_class {
    border: 2px solid red;
}

以及HTML：

<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>

内容将有2个红色边框
内容将有1个黑色边框

尝试使用

！重要信息

仅限于您真正需要的地方-如果您可以重新组织您的样式，这样您就不需要它，这将是更好的选择。

不，不是。使用Meyers CSS reset:）

将其放在index.html的“头”中

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>


html正文{
左：0；
右：0；
底部：0；
排名：0；
保证金：0；
}

我不明白为什么没有人指出具体问题，有些答案完全是误导性的，尤其是公认的答案。问题是OP没有选择可能覆盖用户代理（UA）直接在

ul

标记上设置的边距属性的规则。让我们考虑Op.

使用的保证金属性的所有规则。

body {

margin:0px;
...
}

body元素在DOM中的位置较高，UA规则与下面的元素匹配，因此UA获胜。这是继承的方式。继承是一种方法，在CSS级联应用的任何源没有任何特定声明的情况下，从父元素获取元素的属性值。父元素的特殊性是无用的，因为UA规则直接匹配该元素

#mainNav{
    margin:0 auto;
    ...
}

这是一个更好的尝试，一个更具体的选择器

#mainNav

，它匹配DOM中较低的mainNav元素，但同样的原则也适用，因为

ul

元素仍然位于DOM中该元素的下方

#mainNav ul li{
    ...
    margin:0;
    ...
}

这在DOM里太过分了！现在，选择器匹配

li

元素，该元素位于

ul

元素下方

因此，假设UA规则使用选择器

ul

，而不是

！重要信息

，在这种情况下，解决方案很可能是简单的

ul{margin:0；}

，但更安全的做法是使其更具体，比如说

#mainNav ul{margin:0}

我也有同样的问题，但没有任何效果。我所做的是将以下内容添加到选择器：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

我有自己的样式表，但它无法override@John：然后请发布一些似乎不起作用的HTML/CSS，因为这是一件相当标准的事情。@John-也许你的样式表在UA样式表之前就被调用了？这比公认的答案要好得多。它说的是主要的一点，这是在公认的答案中遗漏的。然而，它可以包含更具体的解释。虽然重置是好的，但它没有做任何您自己的样式表不能做的事情。如果他自己的样式表不起作用，重置不会修复它。是的，这是一个可以在你自己的样式中进行的修复…这就是为什么我把它放在我的样式的顶部…浏览器之间有许多细微差别可以平衡。有些人会提醒您如何适应，而不是让默认行为适用。偶尔，我想要默认值，比如“字体”……所以我只是评论一下……谢谢Mey.…好POST当然是一个项目开始时你想做的事情，而不是在中间，除非你真的被卡住了。我喜欢Meyers的重置，但在项目中期集成它会产生很多额外的、不必要的工作。如果你一定要这样做，从重置中选择你认为可以解决问题的方法，然后逐段添加。请为我们提供HTML/CSS代码。对我们来说，帮助你会更容易。这已经五年了，但它是如此的基本，以至于人们可能会在这里寻找他们基本问题的答案。不幸的是，OP对级联和继承没有基本的了解，他选择了（在发表此评论时）一个没有帮助的答案。在这种情况下，OP错误地依赖于继承。使用非常特定的选择器，他匹配

ul

元素的祖先，但这是无用的，因为UA规则直接在元素上。特异性本来是有用的，但直接作用于元素。请看下面我的答案。事实上，你的例子对我不起作用，至少在Chrome上是这样。第一段没有红色边框。@Tom谢谢，有个打字错误。您必须在编辑之前看到它。只是澄清一下：有问题的行将ul的边距设置为1em，这是在用户代理样式中