CSS优先级问题

Question

我有一个与CSS优先级相关的问题。

如果我有这样的话：

<div id="reportBox">
    <p id="reportBoxTitle">MAIN REPORT</p>
    <p id="reportBoxContent">Promoting Investment in Agriculture</p>
</div>

然后我有以下CSS设置：

#reportBox p{
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #004673; 
}

#reportBoxTitle{
    padding-top: 5px;
    font-size: 18px;
}

通过这种方式， reportBoxTitle div中的文字促进农业投资的大小仍为12px，而不是 #reportBoxTitle指定的18px 设置。

似乎一般的 #reportBox p 设置优先于特定的 #reportBoxTitle 设置。

这是正常行为吗？

TNX

安德烈

Answer 1

是的，这是正常的：第一个选择器的specificity高于第二个选择器id + tag}（只有id），所以写在那里的规则占上风。

解决问题的最简单方法是向第二个选择器添加一个标签，使选择器的特异性相同，以便最后一个可以“赢”现在：

p#reportBoxTitle {
    padding-top: 5px;
    font-size: 18px;
}

Fiddle

但实际上，我不明白为什么你在这里使用<p>而不是<hN>选择器：这一段显然是报告的标题，不仅应该被设计，还要相应地在HTML中标记。例如：

<div id="reportBox">
    <h3 id="reportBoxTitle">MAIN REPORT</h3>
    <p id="reportBoxContent">Promoting Investment in Agriculture</p>
</div>

现在您可以使用以下事实：您在#reportBox中设置的所有属性当前都由其子级继承，并按如下方式重写CSS：

#reportBox {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #004673; 
}

#reportBox h3{
    padding-top: 5px;
    font-size: 18px;
}

Fiddle

Answer 2

这里有关于CSS特殊性噩梦的所有信息：D
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

试试这个：

#reportBox p#reportBoxTitle{
    padding-top: 5px;
    font-size: 18px;
}