HTML 关于块级元素<p>所遇到的问题

今天子查询jquery find和children的区别时,看到一个例子

<script>  
    $(document).ready(function(){  
        $("#abc").children(".selected").css("color", "blue");  
    });  
    </script>  
    <div id="abc">  
        <span>Hello</span>  
        <p class="selected">Hello Again</p>  
        <div>  
            <div class="selected">And Again</div>  
            <span class="selected">aaAnd Again</span>  
        </div>
        <p>And One Last Time</p>  
    </div>  

这例子的结果为:

---

Hello
Hello Again

And Again
aaAnd Again
And One Last Time

---

而将其中的div改为’p’时:

<script>  
    $(document).ready(function(){  
        $("#abc").children(".selected").css("color", "blue");  
    });  
    </script>  
    <div id="abc">  
        <span>Hello</span>  
        <p class="selected">Hello Again</p>  
        <p>  <--原先为div>
            <div class="selected">And Again</div>  
            <span class="selected">aaAnd Again</span>  
        </p> <--原先为/div>
        <p>And One Last Time</p>  
    </div> 

这时的结果为:

---

Hello
Hello Again

And Again
aaAnd Again
And One Last Time

---

先来理解jquery find和children的意思:

w3school上对find和children的描述分别为

函数	描述
.children()	获得匹配元素集合中每个元素的所有子元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

我对它们的理解是:

函数	个人理解
.children()	只获取所有的子元素,子元素下的子子元素不获取
.find()	只要在该父元素下的所有元素,都能湖区到,包括子元素下的子子元素…

前者的.selected作为div下的子标签 从这个理论上来说 是正确的;但是后者的p标签下的.selected同样作为子元素,理论上结果和前者无差别才是.
经过查阅资料 ,找到了一个合理的解释

有些块元素不可以包含另一些块元素 ，DTD中规定了块级元素是不能放在P里;//后半句不理解
P标签内包含块元素时，它会先结束自己，
比如：
<p><div>测试p包含div</div></p>
那么浏览器会解释成：
<p></p><div>测试p包含div</div><p></p>  
会多解释出一个p

这样 就能合理解释 后者子标签失效的原因了.