jQuery 子孫セレクタがうまくいかない

質問

最近jQueryを勉強しはじめた者です。勉強していく中で、
疑問が生じたので、質問させていただきます。

jQueryの子孫セレクタが意図したとおりに動きません。

具体的には

：
$(function(){
$("p strong").remove();
});
：
<p><em><strong>削除される</strong>abcdefg</em></p>
<p><div><strong>削除されるはず</strong>abcdefg</div></p>
：

と記述した時、　　<strong>削除されるはず</strong>　　の部分が削除されません。
　　<strong>削除される</strong>　　の部分は削除されます。

以下のときは、2つとも削除されます。
：
$(function(){
$("li strong").remove();
});
：
<ol>
<li><em><strong>削除される</strong>abcdefg</em></li>
<li><div><strong>削除されるはず</strong>abcdefg</div></li>
</ol>
：

私は、どの場合であっても削除されると考えていました。
ブロックレベル要素とインライン要素が関係していそうな感じはするのですが、
なぜ、このようになるか理由がわかりません。
よろしくお願い申し上げます。

回答No.1

t_ohta

p要素の中にdiv要素を入れることは、HTMLの規定上NGです。
（p要素に含められるのはフレージング・コンテンツだけで、div要素はフロー・コンテンツです）

そのためDOM構造が崩れているため「削除されるはず」の部分がp要素の子孫と見なされていないのだと思います。

お礼

早速のご回答ありがとうございます。
なるほど、その通りですね。
jQueryの勉強中なので、HTMLはいい加減な状態でサンプルを作成していました。
でも、jQueryとHTML/CSSは関係しているわけで、その点をうっかりしていました。
今後は気をつけます。
ありがとうございました。