编程那点事编程那点事

专注编程入门及提高
探究程序员职业规划之道!

无序列表ul和有序列表ol嵌套样式冲突

    在讲无序列表和有序列表嵌套冲突前,我们先假定有序列表和无序列表的css是按以下定义的

ul li {list-style-type: square;}
ol li {list-style-type:decimal;}

在有序列表里面嵌套无需列表,代码如下


		有序列表(应该显示数字)	
			无序列表(应该显示方块)


实际执行后显示的样式如下:

无序列表ul和有序列表ol嵌套样式冲突

    可以看到,无序列表也显示数字了。这样就冲突了,那么如何解决呢?利用css的继承,把css改成如下即可。

ol > li {list-style-type:decimal;}
ul > li {list-style-type: square;}

    这样就解决了无序列表ul和有序列表ol嵌套样式冲突的问题了。

未经允许不得转载: 技术文章 » 前端开发 » 无序列表ul和有序列表ol嵌套样式冲突