html - 应用错误的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 {...}

下时也是一样的

我想知道如何在不使用 important 的情况下解决这个问题。有什么想法吗？

Answer 1

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

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

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