IE7で子要素と同じ要素が隣接し、隣接セレクタと全称セレクタを組み合わせると子要素のみに指定しているCSSが隣接している要素に適用される

ある子要素を持つ要素があり、その要素に隣接する子要素と同じ要素が存在する場合、CSSで隣接セレクターと全称セレクターを組み合わせて使用すると、IE7で子要素のCSSが隣接する要素にも適用されてしまうという現象が発生します。
（子要素、隣接要素にID属性やclass属性が同じ名前で付与されていても同じです）

【HTML】

<div class="sample"> <p>sample sample</p> </div> <p>sample sample</p>

【CSS】

/* グローバルで何か指定 プロパティ指定はなくてもよい（存在さえしていれば） */ p { } /* ここで指定しているスタイルが「,sample」に隣接する要素にも適用される */ div.sample p { background-color:#00d; } /* 「#abc」は存在しないあるいは要素名以外で指定 プロパティ指定はなくてもよい（存在さえしていれば） */ #abc + * { }

この不具合（バグ）は、以下の方法で解消することができます。

• 隣接セレクターとは別にクラス名を割り当ててCSSを適用する。
• 隣接している要素にCSSを上書きする。

隣接セレクターとは別にクラス名を割り当ててCSSを適用する

【HTML】

<div class="sample"> <p class="text">sample sample</p> </div> <p>sample sample</p>

【CSS】

p { } div.sample p.text { background-color:#00d; } #abc + * { }

隣接している要素にCSSを上書きする

【HTML】

<div class="sample"> <p>sample sample</p> </div> <p>sample sample</p>

【CSS】

p { } div.sample p { background-color:#00d; } div.sample + p { background-color:#fff; } #abc + * { }