html - 为什么这只适用于 "!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 的class 更具体的选择器。重要的只是覆盖级联。