为什么这只适用于“！important”？

Question

我有这段代码，它拒绝在没有!important的情况下工作（我从不想使用它，因为我知道总有一种方法可以不用它）。

有趣的是CSS系列是其他所有东西（据我所知，这应该覆盖其他东西）

现场演示jsFiddle

HTML结构：

<div id="body">
    <div class="box">
        <p>...</p>
    </div>
    <p>...</p>
</div>

CSS：

#body{
    padding:18px 35px;
}

#body p{
    margin-bottom:18px;
}

.box{
    background:#ddd;
    border:1px solid #000;
    padding:5px;
}

.box p{
    margin:0;/*works with !important*/
}

Answer 1

这是因为#body p的ID是比.box p类更具体的选择器。重要的是简单地覆盖了级联。

Answer 2

与#body匹配p具有比将p与.box匹配更高的特异性。阅读CSS规范的specificity section以获取帮助。尝试

#header .box p { margin: 0; }

＃header和.box之间的空间很重要。

Answer 3

您的#body p具有更高的特异性值。您可以阅读更多关于如何计算特异性值的更多信息here。