小雕雕的家

寫了 n 年的網頁程式今天才發現這個有點基礎到可怕的問題

原因當然也是一般人不會用 <p> 去當容器包內容

但好死不死我拿到切好的版就是用 <p>

然後<p>裡面的資料是要去 server 撈資料填進去的

好死不死又好死不死，資料庫撈出來的資料有 <p>

所以就變成這種狀況 

<p class="brand-history_font2">

      <p>123456789<p>   <--------- 資料庫撈的

</p>

然後就發現了這個靈異現象

範例如下，是個簡單到可怕的 CSS : 

<style type="text/css">

.brand-history_font2 {

     font-size:10pt;

     color:#333333;

}

</style>

<p class="brand-history_font2">

      <p>測試一下</p>

</p>

照一般常識來看 .brand-history_font2 的有效範圍應該是在被

<p class="brand-history_font2">

<p>

所包起來的範圍都會被影響，但結果好像不是這樣.....

如下 : 

然後不要偷懶好了，改成這樣寫 

<style type="text/css">

.brand-history_font2 p {

     font-size:10pt;

     color:#333333;

}

</style>

<p class="brand-history_font2">

      <p>測試一下</p>

</p>

也沒用耶 @@

然後問了在 CSS 打滾多年的臉黃黃小姐，順便問有沒有妹可以介紹之後

她做了個測試如下

<style type="text/css">

.brand-history_font2 {

     margin: 5px; 

     padding: 5px;

     width: 200px;

     border: 1px solid #000;

     font-size:9pt;

     color:blue;

}
</style>

<div class="brand-history_font2"> DIV是區塊元素</div>

<p class="brand-history_font2"> P是文字/段落元素</p>

<div class="brand-history_font2"><p>DIV(區塊)裡面放P(文字/段落)是合理的</p></div>

<p class="brand-history_font2"><div>P(文字/段落)裡面放DIV(區塊),是不受控制的</div></p>

<p class="brand-history_font2" style=" display: block; height:20px;"><div>就算把P(文字/段落)定義成區塊,也是不受控制的，用瀏覽器的觀察元素會發現，P被瀏覽器自動補了開始跟結尾</div></p>

結果如下 : 

我用 chrome 檢視原始檔是沒有發現有被補 <p></p>的現象

但是用 firefox 檢視原始檔就會說你有結尾但沒有<p>的開始

如果真的是會偷補個<p></p> 上去，那 selector 找不到是正常的，因為是空的

然後我就開始找為什麼div、span.....等標籤裡面不管放什麼都找的到，唯獨<p>

資料實在少得可憐..................

最後找到的資料都是簡體的 ，想瞭解的人自己用同文堂轉成繁體好了

解答 : 

HTML中為何P標籤內不可包含DIV標籤？

附註 : 如果你是使用 JQuery 也會找不到 ，這應該是 html 本身的限制

如下的寫法也是完全不行

$(function(){

     $(".brand-history_font2").find("div").css("color","red");

});