有趣的css —— li 标签的样式操作（含自定义）

最近发现了一个关于html中 li 标签比较有趣的知识，用起来也是嘎嘎香。

1. 常规

日常开发中，避免不了会用到列表，一般我们会将前面的小点去掉，但是除了去掉，我们还可以有更多的选择，在使用li标签的时候，为 list-style-type：加上以下值，会有比较好的效果哦：

disc	实心圆
square	方块
circle	空心圆
decimal	数字
lower-latin	小写字母

上css代码：

 li:nth-child(1) {
      list-style-type: disc;
    }
    li:nth-child(2) {
      list-style-type: square;
    }
    li:nth-child(3) {
      list-style-type: circle;
    }
    li:nth-child(4) {
      list-style-type: decimal;
    }
    li:nth-child(5) {
      list-style-type: lower-latin;
    }

效果演示：

 2. 自定义

除了以上常见的一些样式，我们还可以通过 ::marker 伪元素进行自定义样式，达到自己想要的效果

css代码展示：

  li:nth-child(1)::marker {
      content: '♥';
      color: red;
    }
    li:nth-child(2)::marker {
      content: '√';
      color: green;
    }
    li:nth-child(3)::marker {
      content: '卍';
      color: pink;
    }
    li:nth-child(4)::marker {
      content: '④';
      color: blue;
    }
    li:nth-child(5)::marker {
      content: '♪';
      color: orange;
    }

效果演示：

当然除了放自定义符号，我们还可以放图片 

代码：

 li:nth-child(1)::marker {
      content: url(https://s1.ax1x.com/2023/04/13/ppj04e0.png);
    }
 li:nth-child(2)::marker {
      content: url(https://s1.ax1x.com/2023/04/13/ppj0xw6.png);
    }
 li:nth-child(3)::marker {
      content: url(https://s1.ax1x.com/2023/04/13/ppjBpFO.png);
    }

效果：

 去更远的地方，见更亮的光！