CSS规则不适用

Question

我有以下标记和CSS：

<div id="contactarea">
                <p class="heading">Anuncios Premium</p>
                <p class="tag">Asegure que su venta se complete!</p>
            </div>

#contactarea
{
    min-height:150px;
    border:1px solid cyan;
}

#contactarea p .heading
{
    Color:Yellow;
    background-color:Green;
}

#contactarea p .tag
{
    min-height:150px;
    border:1px solid cyan;
}

仅联系区域工作，青色边框显示，但p的字体颜色不起作用。

谢谢！

Answer 1

空间太多：

#contactarea p.heading

你得到它的方式，它意味着“具有类'标题'的任何元素是<p>元素的后代，它是id为'contactarea'的元素的后代”。因此它不会影响<p>标签本身。

The SelectORacle site是一位好朋友！

Answer 2

摆脱额外的空间。 #contactarea p .heading应为#contactarea p.heading。

Answer 3

这不是您直接问题的答案，但将来可能对您有所帮助。首先，如果您发现一个规则取代另一个规则，请注意样式表中CSS规则的自然优先级以及内联css的优先级＆gt;外部css。其次，如果您希望规则具有优先权，您可以这样做：

#contactarea p.heading { color:yellow !important; }