我有一个与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
安德烈
答案 0 :(得分:5)
是的,这是正常的:第一个选择器的specificity高于第二个选择器id
+ tag
}(只有id
),所以写在那里的规则占上风。
解决问题的最简单方法是向第二个选择器添加一个标签,使选择器的特异性相同,以便最后一个可以“赢”现在:
p#reportBoxTitle {
padding-top: 5px;
font-size: 18px;
}
但实际上,我不明白为什么你在这里使用<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;
}
答案 1 :(得分:0)
这里有关于CSS特殊性噩梦的所有信息:D
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
试试这个:
#reportBox p#reportBoxTitle{
padding-top: 5px;
font-size: 18px;
}