CSS 规则不适用答案

【问题标题】：CSS rule isn't applyingCSS 规则不适用
【发布时间】：2010-10-15 03:38:14
【问题描述】：

我有以下标记和 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;
}

单独的contactarea起作用，青色边框显示，但是p的字体颜色不起作用。

谢谢！

【问题讨论】：

webdeveloper for firefox 是一个很好的工具来确定为什么会发生这样的事情:)

标签： html css layout

【解决方案1】：

空格太多：

#contactarea p.heading

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

The SelectORacle site 是个好朋友！

【讨论】：

【解决方案2】：

去掉多余的空格。 #contactarea p .heading 应该是 #contactarea p.heading。

【讨论】：

【解决方案3】：

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

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

【讨论】：

因此是前言。放松，我不会与你或 Pointy 竞争接受答案。