一直以为P标签作为块级元素,可以像div那样可以嵌套其他的块级元素。因为开发过程中没这样写的习惯,一直也就没有遇到过,直到面试被问到这个问题。
于是代码操作一下看看:
结果发现父级包裹的P标签被解析成了两个P标签,这样一来我写的P标签就从没有兄弟节点变化成有两个兄弟节点了。如果写CSS的时候使用了nth-child()、last-child()这样的选择器,那么我们的样式是不是就变化了。
从上面这个现象来看,我们得出结论:p标签里面不能嵌套ul、div等块级元素,只能嵌套内联元素(行内元素)。
当发现了上面这个问题得到解决了之后,一个新的问题就来了:块级元素只有P标签这一个不能嵌套块级元素吗?
于是发现块级元素h1~h6之间也不能相互嵌套,嵌套之后浏览器会自动帮我们把他们拆分开,转化成两个同级标签。经过进一步的测试发现,h1~h6可以单独让div、p嵌套,但是仍不建议这样使用,毕竟他们是语义化标签。跟上面这个相似的像我们常用的无序列表ul、有序列表ol,虽然可以嵌套div、p等,但我们还是要遵循语义化。