标签搜索
隐藏侧边栏

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

搞前端的半夏
2022-05-11 / 0 评论 / 0 点赞 / 111 阅读 / 1,984 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

前言

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

image-20211114220220120

list-style-type

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

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

image-20211114221736291

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

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

image-20211114221908555

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

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

image-20211114222115777

不过我觉得最牛的还是@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;
}

image-20211114223827412

例2:范围

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

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

ul {
list-style: countstyle;
}

image-20211114224237352

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

image-20211114224327411

::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。

image-20211114230434135

0

评论区