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 に含まれるテキストPromoting Investment in Agricultureは、#reportBoxTitle設定で指定された 18px ではなく 12px のサイズのままです。

一般的な#reportBox p設定は、特定の#reportBoxTitle設定よりも優先されるようです。

それは正常な動作ですか？

TNX

アンドレア

4

2 に答える 2

5

はい、正常です。最初のセレクターの特異性idは、2 番目のセレクターの特異性 ( + tag) よりも高い ( +)idため、そこに書かれている規則が優先されます。

これを解決する最も簡単な方法は、2 番目のセレクターにもタグを追加し、セレクターの特異性を同じにして、最後のセレクターが「勝つ」ことができるようにすることです。

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>

これで、現在設定しているすべてのプロパティがその子に継承されるという事実を利用して、#reportBoxCSS を次のように書き換えることができます。

#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 に答える