CSS * {margin: 0;padding: 0;} override

Question

大家好，我需要一些帮助来解决如何覆盖我的CSS中的“* {margin: 0;padding: 0;}”。

原因是我有这个CSS：

 .postcomments { width: 547px; padding: 5px 5px 5px 5px; margin: 0 0 5px 0;} 
 .postcomments a { text-decoration: underline;}
 .postcomments ul { margin: 0; padding: 0; list-style-type: none;}
 .postcomments ul li { width: 547px; margin: 0 0 5px 0; padding: 0; list-style-type: none;}
 .postcomments .right { color: #474747; font-size: 11px; background: #fff url('http://www.nextbowluser.com/img/ucBG.gif') no-repeat top left; line-height: 17px; padding: 5px 0 0 0; width: 430px; position: relative; float: right; min-height: 50px;}
 .postcomments .right .bottom { padding: 0 5px 15px 5px; background: #fff url('http://www.nextbowluser.com/img/ucBG.gif') no-repeat bottom right; min-height: 50px;}
 .postcomments .arrow { left: -15px; top: 20px; position: absolute;}
 .avatar { border: none !important;}

 .postcomments .left {float: left; margin: 0 7px 0 0;}
 .postcomments .gravatar { background: #fff; width: 80px; height: 60px; margin: 0 0px 0 0; padding: 3px;}
 .postcomments .name { font-size: 11px; margin: 2px 0 0 0; color: #000;}
 .avatar { border: none !important;}

即使没有 * {margin: 0;padding: 0;}，它也可以正常显示：

 1st comment
 2nd comment
 3rd comment

然而，当我将其添加到CSS中时，它使评论的堆叠方式出现了问题：

 1st comment
    2nd comment
        3rd comment

我建议只删除 * {margin: 0;padding: 0;}，但页面上的其他部分需要它才能正确显示。所以我的问题是，如何仅覆盖页面上的 postcomments 部分的 {margin: 0;padding: 0;}？

谢谢！ :o)

大卫

更新： 好吧，还是无法正确地获取它。删除整个站点的 margin: 0px 会使站点看起来很糟糕。如果我必须为页面上的每个元素添加 margin: 0px 才能使它看起来像使用 * 一样，那就不好了。我仍然只需要绕过 .postcomments 部分就可以了。

- StealthRT

---

不要这样做。给所有块级元素设置自己的边距/填充。 - BalusC

你的HTML结构是怎样的？评论被缩进的方式似乎有些奇怪。 - icio

Balus C 是正确的，不要这样做。然而，我的直觉告诉我，您还没有更改锚元素(<a>)的边距填充。您还应该放弃使用!important，并了解CSS特异性 - http://www.w3.org/TR/CSS2/cascade.html#specificity - Richard JP Le Guen

Answer 1

你尝试使用!important了吗？

.postcomments {
   margin: 15px  !important;
   padding: 15px !important;
}

我正在使用15像素，但你可以使用适合你的任何值。

- Germán Rodríguez

---

不要使用 !important，而是学习有关 CSS 优先级的知识。参考链接：http://www.w3.org/TR/CSS2/cascade.html#specificity - Richard JP Le Guen

@RichardJPLeGuen !important 对我的情况有效。为什么不建议使用？可能会有哪些问题？我正在使用一堆 CSS 构建我的应用程序，很难找到解决方法，而 !important 在几秒钟内解决了这个问题。 - CodeMonkey

我的评论太长了，所以我提出并回答了一个问题：为什么不建议使用!important。 - Richard JP Le Guen

Answer 2

也许可以使用一个 reset.css 文件（例如Eric Meyer），然后观察如何构建无序列表。如果有嵌套的 ul，通常会为每个 ul 设置 margin-left。

- SQueek

Answer 3

你需要提供比其他答案更具体的信息

尝试将标签放在类前面或父级标签中

div.postcomments {
span.postcomments {

或者如果那不是一个选项，你总是可以求助于

* .postcomments {

- Ben Rowe

Answer 4

.postcomments应该覆盖*，因为类更具体。

- Matt Briggs

---

谢谢回复，Matt。但似乎并非如此。* {margin: 0;padding: 0;} 这行代码放在 .postcomments 的 CSS 之前，但问题依旧存在。我甚至尝试将其放在 .postcomments 之后，结果还是一样。 - StealthRT