自分のスタイルが周囲のdivの別のスタイルに上書きされないようにするにはどうすればよいですか？

Question

初級のようですが、ここが問題です。

そのようなスタイルシート：

#Content h1, #Content h2, #Content h3, #Content h4, #Content h5, #Content h6 {
  color: #405679;
}

h3#issueHeader {
  color: blue;
}

そのようなHTML：

<div id="Content">
  <h3 id="issueHeader">In This Issue:</h3>
</div>

予想どおりContentHeaderをオーバーライドするissueHeaderセレクターの代わりに、Firebugと私の眼球は、色がdivから継承され、issueHeaderセレクターがオーバーライドされていることを示しています。フン？

Answer 1

cssは、より多くの 特定の セレクターを持つ要素により大きな重みを与えます。だからあなたが欲しいなら#Content h3オーバーライドしないh3#issueHeader、別のセレクターを指定します。 #Content h3＃issueHeader

H1 ... hx要素が一般的に＃405679であることが意図されている場合は、＃Contentセレクターなしでそれらに設定します。次に、必要に応じて、より具体的なセレクターでオーバーライドします。

Answer 2

!importantの属性h3#issueHeaderブラウザにそのスタイルを使用するように強制する

h3#issueHeader {
  color: blue !important;
}

ただし、IE6では部分的にしかサポートされていません。

---

Answer 3

セレクターを次のように設定してみてください。

#Content h3#issueHeader {
    color: blue;
}

これで修正されるはずです。

Answer 4

あなたはいわゆるCSSの特異性を持っています。ポイント（スターウォーズを使用して起動する）の良い書き方は次のとおりです。ポイントの観点から基本を説明し、カスケードするものを計算する方法を説明します。

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 5

Id = "issueHeader"が重複している場合、それが可能です。