關於p標簽的嵌套問題

本文轉載自查看原文 2014-08-10 13:11 5215 Css

今天群里問了一個p的問題，初看我覺得恩這么簡單我應該知道。

他代碼如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<body>
<body>
<div>
    <p><p></p></p>
 
</div>
</body>
</body>
</html>

<script>
$(function(){
     var p = $("p");
     alert(p.length);
});
</script>

　　然后輸出了3

我怎么看也是2啊，然后我就讓他把代碼發給我看看，后來別人說p嵌套會有問題，我就試了一下其它標簽發現i，a ，div都是好的，

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div>
    <div>1<div>2</div>3</div>
</div>
</body>
</html>
<script>
    $(function() {
        var $targetName = $('div');
       console.log('i len:',$targetName.length);

        for(var i=0;i<$targetName.length;i++) {
            console.log($targetName.eq(i).html());
        }
    });
</script>

然后我突然想起，p里面是不能嵌套塊級的，p自己也是塊級，
例如123
他最后會被解析為
1
2
<p

然后我繼續想，如果我把p的style設置為inline呢？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <style>
        p {
            display: inline;
        }
    </style>
</head>
<body>
<div>
    <p>1<p>2</p>3</p>
</div>
</body>
</html>
<script>
    $(function() {
        var $targetName = $('p');
       console.log('p len:',$targetName.length);

        for(var i=0;i<$targetName.length;i++) {
            console.log($targetName.eq(i).html());
        }
    });
</script>

恩還是會輸出3的，這個應該是和瀏覽器有關系的。

ps：問題雖小，但是我今天才知道，略掉臉，囧。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於p標簽不能嵌套div標簽引發的標簽嵌套問題總結 HTML中部分標簽的嵌套問題結構體的嵌套問題 react antd form Item嵌套問題關於js的單雙引號嵌套問題 postgresql的單引號的嵌套問題 ajax請求的異步嵌套問題分析 element-ui文本框嵌套問題關於 form表單嵌套問題的解決方案 p標簽里面不能嵌套div