1

我有一个与 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 中的促进农业投资文本仍然具有 12 像素的大小，而不是#reportBoxTitle设置指定的 18 像素。

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

这是正常行为吗？

肿瘤坏死因子

安德烈亚

4

2 回答 2

5

是的，这很正常：第一个选择器的特异性（id+ tag）高于第二个选择器（just 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;
}

小提琴。

于 2013-09-08T09:52:08.633 回答
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;
}
于 2013-09-08T09:58:20.637 回答