更改列表的默认项标记的颜色、大小等样式的解决办法
生活随笔
收集整理的這篇文章主要介紹了
更改列表的默认项标记的颜色、大小等样式的解决办法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
提示:如果僅更改列表項的顏色,而不是項標記的顏色,設置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
總結
以上是生活随笔為你收集整理的更改列表的默认项标记的颜色、大小等样式的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【UESTC 594】我要长高
- 下一篇： 【18】让接口容易被正确使用，不易被误用