Question

HTML：

<div id="outer">
   <div id="inner"></div>
   <div id="..."></div>
</div>

CSS：

#outer div {
   margin: 0 auto;
}

#inner {
   margin-top: 10px;
}

我的问题在于内部div风格。看起来保证金：0自动总是比保证金最重要。我将#outer div {...}置于#inner {...}

之下时也是如此

我想知道如何在不使用重要内容的情况下解决此问题。有什么想法吗？

Answer 1

这不是错误。 #outer div比#inner更specific selector。您可以将CSS特性视为基于点的系统。在这种情况下，您的两个规则中的每一个都会引用10个点来引用ID。第一个规则（包括div元素）获得额外的1分。这使得#outer div有11分，而#inner只有10分。这意味着#outer div应用于元素的规则。

#outer #inner {
   margin-top: 10px;
}

上述规则将 20 点并应用于元素。

Answer 2

可能是这样的：

#outer div:nth-child(1)  /*instead of #inner */
{
   margin: 0 auto;
}

#outer div:nth-child(n+2)
{
   margin-top: 10px;
}

应用bug的CSS顺序

2 个答案: