css - 割り当てられている DIV の外で適用される CSS スタイル

Question

私のスタイル シートでは、H1 と H2 のスタイルを次のコードで上書きしました。そして、私の HTML では、H1 タグを含む DIV にそのスタイルを適用しました。

ただし、このスタイルは、問題の div の後に H1 および H2 タグにも適用されます。

ここに複製: http://jsfiddle.net/89gkQ/1/

スタイルが適用されている div の外にスタイルが適用されるのはなぜですか? どうすれば停止できますか?

Answer 1

CSSでは、カンマは英語のようには機能しません。

.featuredtitle h1, h2 {
  color: red;
}

このコードは、次のコードと同等です。

.featuredtitle h1 {
  color: red;
}

h2 {
  color: red;
}

それはあなたが望むものではありません。カンマを使用すると、複数のセレクターを記述できるため、もう少し冗長になります。

.featuredtitle h1, .featuredtitle h2 {
  color: red;
}

デモ： http： //jsfiddle.net/89gkQ/2/

Answer 2

問題はここにあります：

.featuredtitle h1,h2 {
    font-size: 1.5em;
    font-weight:bold;
    color:#a00;
}

代わりに次のように記述してください。

.featuredtitle h1, .featuredtitle h2 {
    font-size: 1.5em;
    font-weight:bold;
    color:#a00;
}

コンマは新しいセレクターを開始します。この場合、スタイルは、場所に関係なく、すべての H2 タグに適用されます。