*CSS规则如何比类或ID样式规则更具体？

Question

我正在使用*选择器来指示除非我另行指定,否则网站上字体的颜色应设置为某个值.

*{

font-family:"Verdana";
color: #04468e;
}

到现在为止还挺好.问题在于,这是最常规的规则,它应该被轻易覆盖,例如通过

#profileMessageBoxHeader
{
background:url('images/profileMessageHeaderGradient.png') repeat-x #208ff6;
height:178px;
border-radius:10px 10px 0px 0px;
color:#fff; 
}

所以下面的代码......

<div id="profileMessageBox">
    <div id="profileMessageBoxHeader">
        <
        <p>Please fill out the form and click submit.  Your entered profile data will be provided to the tutor, to allow them to contact you.</p>
    </div>
</div>

应该产生白色文字.但是,出于某种原因,极其通用的*规则会覆盖更具体的ID规则.为什么？

Answer 1

* 是通用选择器并覆盖 #profileMessageBoxHeader 上的设置。与手动设置BODY、H1、P、TABLE、TR、TD、TH、PRE、UL、LI、ETC相同。有关它以及它如何规避继承的更多信息，Eric Meyer 有一篇很好的文章。

应用以下内容，它应该可以工作：

#profileMessageBoxHeader p
{
    color: #FFF;
}

示例： http: //jsfiddle.net/x7AnM/