首先我们知道无序列表的type属性默认值是实心圆;有序列表的type属性默认值是数字1。但其实在列表嵌套中不是这样的。
一、无序列表嵌套
第一级:type属性默认值为"disc"实心圆;
第二级:type属性默认值为"circle"空心圆;
第三级之后(包括第三级):type属性默认值为"square"正方形。
代码示例:
运行效果:
从代码可以看出,我并没有去设置type属性值,但无序列表中type默认值不一定为"disc"实心圆。
若第n级的type属性值设置为"1"或其他属性值(有序、无序列表嵌套),也不会影响第n级以外的tpye默认值(该是第几级还是第几级,type默认值不变)。例如,我将第二级无序列表改成有序列表,且不设置type属性值。效果如下:
二、有序列表嵌套
type属性默认值为数字"1",无论嵌套多少级都一样。
三、列表标签混乱(缺失)
首先我们写代码时,一定要注意代码规范!但如果我们遇到有人的代码不规范,我们也要能够分析出该代码的产生效果。下面是列表嵌套时,产生的效果分析。
列表嵌套标签配对顺序:从里到外,从头到尾!
情况一:头标签配对失败,也就是尾标签丢失。那么则会在下一配对成功的标签对的尾标签前隐藏了一个相对应丢失的尾标签。
示例1:
效果1:
情况二:尾标签配对失败,也就是缺少头标签。那么这个尾标签直接失效,不会产生任何效果。因为标签配对顺序是从头到尾开始配对的,头标签配对时忽略了这个不适配的尾标签,而后面的标签又会继续往下配对。所以配对失败的尾标签,则直接失效。
示例2:
效果2:
情况三:若标签混乱,从里到外配对,到最后有多余的头标签。那么相当于列表的末尾会有一个隐藏的尾标签。与情况一相似。
示例3:
效果3:
情况四:若标签混乱,从里到外配对,到最后有多余的尾标签。那么这个尾标签与情况二相似,也是直接失效了。这个失效的尾标签前还会留有多余的<li></li>标签,这些<li>标签单独出现时也是有type默认值的,且无论前面列表的最后一个标签对是有序还是无序,它的type默认值都是"disc"实心圆。而且多余的这些<li>标签是与<p>标签对齐的,并不是接在列表后面。
示例4:
效果4: