你不知道的美化列表的两种方案！

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

对于网页中的ul，我其实很少关注，或者说我基本不会用它，不过今天我算是见识到了ul的厉害之处，或者说是list-style-type的厉害之处。这个属性无论是ol还是ul都可以使用，同时这个属性所有的浏览器都支持。

list-style-type

list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。list-style-type有很多默认值。可以设置各种各样的样式。当然你也可以设置字符串，

ul{
list-style-type: "----";
}

这个字符串也可以是代表图标的unicode值：

ul{
list-style-type: "\2708";
}

当然还可以接受表情符！例如你使用win+. 唤醒windows自带的表情符号。

ul{
list-style-type: "😜😘😒🤦‍♂️";
}

不过我觉得最牛的还是@counter-style,它允许你自定义list-style-type的样式，真正的赋能！！！

@counter-style允许你设置不同的选项，具体的是下面。

@counter-style <counter-style-name> {
  [ system: <counter-system>; ] ||
  [ symbols: <counter-symbols>; ] ||
  [ additive-symbols: <additive-symbols>; ] ||
  [ negative: <negative-symbol>; ] ||
  [ prefix: <prefix>; ] ||
  [ suffix: <suffix>; ] ||
  [ range: <range>; ] ||
  [ pad: <padding>; ] ||
  [ speak-as: <speak-as>; ] ||
  [ fallback: <counter-style-name>; ]
}

例1: 符号+后缀

@counter-style countstyle {
  system: cyclic;
  symbols: "😜😘😒";
  suffix: "-";
  }

ul {
list-style: countstyle;
}

例2：范围

这是我目前用到的，公司有几组数据：在某连续组数据前，要加上特定的符号，因为是vue做的，一开始在使用v-if来做的。后来通过谷歌发现了这个用法，属实好用哦。

@counter-style countstyle {
  system: cyclic;
  symbols: "😜😘😒";
  suffix: "-";
  range:2 3;
  }

ul {
list-style: countstyle;
}

这里显示为1是触发了它的fallback

::maker

题目的标题是两种方法，如果你不看到这里，肯定觉得我标题党了，其实并不是，这个属性，也是我在学习list-style-type中看到的。

MDN

::marker CSS pseudo-element（CSS伪元素） 选中一个list item的marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li)和[和](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary)和[。

目前的话::maker支持的属性并不是很多，只包括font properties color, text-combine-upright, unicode-bidi, directionand content。

ul li:nth-child(1)::marker {
content: "🍔🍟🍗";
font-size: 20px;

}
ul li:nth-child(2)::marker {
content: "\2708";
font-size: 20px;
color:orchid;

}
ul li:nth-child(3)::marker {
content: "----";
font-size: 20px;
color: aqua;

}

请注意这是一个伪元素，应用在li。