欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

更改列表的默认项标记的颜色、大小等样式的解决办法

发布时间：2024/4/17 编程问答 57 豆豆
生活随笔 收集整理的这篇文章主要介绍了 更改列表的默认项标记的颜色、大小等样式的解决办法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

提示:如果仅更改列表项的颜色,而不是项标记的颜色,设置li的颜色就可以,则以下可以忽略。

本文的解决办法是利用伪元素选择器,在元素的内容的最前面添加文字来模拟默认浏览器样式达到效果的(也可以用图片),因为浏览器默认自带的项标记并不能更改颜色和大小。

效果图:

 

 

 

代码:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">ul {width: 200px;margin: 0 auto;padding: 0;list-style: none;}/*正方形*/ul li::before {content: "■";color: #F00;}/*实心圆*/ul li::before {content: "●";color: #0F0;position: relative;top: -1px;margin-right: 7px;}/*空心圆*/ul li::before {content: "○";color: #00F;}</style> </head> <body><ul><li>1</li><li>2</li><li>3</li></ul> </body> </html>

转载于:https://www.cnblogs.com/fantianlong/p/11336555.html

总结

以上是生活随笔为你收集整理的更改列表的默认项标记的颜色、大小等样式的解决办法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。