問題描述

期待樣式：

單一精確度顯示：“精確度等級(jí)：xxxxx”

非單一精確度顯示：“精確度等級(jí)：xxxxx ~ xxxxx”

下面是錯(cuò)誤的示范，僅供說(shuō)明使用：

 p ng-repeat= parameter in object.parameterCalibrateAbilitySet  p ng-if= parameter.parameterCategory.singleAccuracyOrNot  準(zhǔn)確度等級(jí)：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }} p ng-if= !parameter.parameterCategory.singleAccuracyOrNot  準(zhǔn)確度等級(jí)：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + ~ + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }} /p 

看代碼感覺沒問題，但是渲染出來(lái)是這么個(gè)東西，沒有數(shù)據(jù)。

打開控制臺(tái)，看我們的DOM結(jié)構(gòu)，發(fā)現(xiàn)我們?cè)瓉?lái)的嵌套p標(biāo)簽被渲染為3個(gè)獨(dú)立的p標(biāo)簽。

所以看結(jié)構(gòu)，我們的準(zhǔn)確度等級(jí)不在ng-repeat修飾的p標(biāo)簽中，所以無(wú)法獲取數(shù)據(jù)，就會(huì)顯示錯(cuò)誤。

以下均為個(gè)人猜想，如果錯(cuò)誤歡迎批評(píng)指正。

假如我們寫了一個(gè)嵌套的p標(biāo)簽，因p標(biāo)簽不能嵌套塊級(jí)元素。

所以瀏覽器渲染到第二行時(shí)，發(fā)現(xiàn)了一個(gè)塊級(jí)元素，會(huì)認(rèn)為第一行的p標(biāo)簽已經(jīng)完結(jié)了，所以瀏覽器認(rèn)為是開發(fā)者少寫了一個(gè)p的結(jié)束標(biāo)簽。

同理，最后，瀏覽器會(huì)認(rèn)為開發(fā)者少寫了一個(gè)p的開始標(biāo)簽。

所以最后會(huì)呈現(xiàn)出如上圖所示的DOM結(jié)構(gòu)。

歸根結(jié)底，就是p標(biāo)簽中不能嵌套塊級(jí)元素。

內(nèi)聯(lián)元素不能嵌套塊級(jí)元素，p標(biāo)簽中不能嵌套塊級(jí)元素。這些我們可能都或多或少聽說(shuō)過(guò)，但是我們只是把它當(dāng)做一種規(guī)范。

相關(guān)文章推薦：

父元素 a 標(biāo)簽的默認(rèn)行為以及click事件之間的相互影響

link標(biāo)簽鏈接CSS和@import加載有什么區(qū)別？

以上就是html中標(biāo)簽嵌套的問題如何解決的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。