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

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