恢复ul,ol的默认样式css

客官°小女子只卖身不卖艺 2023-02-11 07:29 355阅读 0赞

[https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html][https_www.cnblogs.com_zhaiqianfeng_archive_2012_06_28_4616645.html]

取消UL和OL符号以及padding和margin，CSS代码如下：

ul,ol{list-style:none; margin:0px; padding:0px;}

但想恢复默认确费了点力气！

先解释一下为什么要取消：

*  ul,ol开头这样写就是控制所有的ul和ol
 *  list-style:none; 就是把列表的项目符号取消，不显示符号，因为在写导航的时候不用单独来取消，并且在输入文章列表的时候我也不想用默认的一个圆点。
 *  margin:0px; 在IE里面列表默认有外边距，所以设置成0像素，方便控制。
 *  padding:0px;在火狐里面列表默认有内边距，所以设置成0像素，也是未来方便控制。

因为我一开始就控制了所有的UL和OL，但是后来由于某种需求在某些地方又需要恢复为默认的样式，研究了很久终于搞定：

ul{list-style-type:disc; list-style-position:inside;} 
    ol{list-style-type:decimal; list-style-position:inside;}

再解释一下：

*  list-style-type:就是控制列表符号的意思 上面的disc就是圆点 下面的decimal就是阿拉伯数字 开始以为这样就可以了，结果一浏览还是一样不会显示列表符号，最后才发现需要加上这一句
 *  list-style-position:就是控制列表位置的意思 inside是列表缩进的意思 因为之前把外边距和内边距都设成0像素了 所以一定要加上这一句 才能恢复到默认

这两句代码还可以简写，如下

ul{ list-style:disc inside;}  
    ol{ list-style:decimal inside;}

自定义序号:

ol{list-style-type:none;counter-reset:sectioncounter;width:200px;}
       ol li:before {
           content:counter(sectioncounter) "、"; /*代表数字counter(sectioncounter)*/
           counter-increment:sectioncounter;
        }

![2020072316591781.png][]

[https_www.cnblogs.com_zhaiqianfeng_archive_2012_06_28_4616645.html]: https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html
[2020072316591781.png]: https://img-blog.csdnimg.cn/2020072316591781.png