html - 应用 bug 的 CSS 顺序

Question

HTML：

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

CSS：

#outer div {
   margin: 0 auto;
}

#inner {
   margin-top: 10px;
}

我的问题是内部 div 样式。似乎 margin: 0 auto 总是比 margin-top 更重要。当我放在#outer div {...}下面时是一样的#inner {...}

我想知道如何在不使用重要的情况下解决此问题。任何想法？

Answer 1

这不是错误。是比#outer div更具体的选择器#inner。您可以将 CSS 特异性视为基于点的系统。在这种情况下，您的两条规则中的每一条都因引用 ID 而获得 10 分。第一条规则（包括 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;
}