CSS 列表模型之marker标记

本文次要对::master伪元素、list-item下的list-style-image、list-style-type款式属性进行介绍，并介绍了在理论中如何应用。list-item下还有其余不罕用的款式属性这里不做介绍。感兴趣的能够自行移步CSS 规范文档

::marker 是什么

::marker是一个标记伪元素，可能定义内容填充在list-item上代表列表项的标记，先附上一个例子，就能很分明地看出它的作用。

<style>li::marker { content: "(" counter(list-item) ")"; }li { display: list-item; }</style><ul>  <li>zhaodao88.com 找商机</li>  <li>zhaodao88.com 找人脉</li>  <li>zhaodao88.com 找洽购</li></ul>

效果图：

在这里，marker为元素定义的是每一项列表项后面的标记符，在伪元素内的content的内容就是要在列表项后面所填充的内容。

应用::marker填充标记内容

须要留神的是，一般元素要想应用marker，必须将元素定义成display: list-item，list-items在创立的时候会主动生成marker和counter。

标记的款式能够应用list-style-type和 list-style-image属性或者间接应用::marker伪元素进行款式编写。上面展现一个例子。

  • 用::marker伪元素对标记进行管制，伪元素内content的内容就是标记符的内容
<style>  p { margin-left: 12 em; }  p.note {    display: list-item;    counter-increment: note-counter;  }  p.note::marker {    content: "Note " counter(note-counter) ":";    color: blue;    font-weight: bold;  }</style><p>zhaodao88.com 找商机</p><p class="note">zhaodao88.com 找洽购</p><p>zhaodao88.com 找人脉</p>

成果如图:

当然也能够为标记设置字体款式、色彩等属性，相似下面成果li::marker { color: blue; font-weight:bold; }

值得注意的是：目前只有以下属性可能作用于marker伪元素上

  • 所有的字体款式：font相干
  • white-space属性
  • color属性
  • text-combine-upright, unicode-bidi, direction属性
  • content属性
  • 所有的animation和transition属性

有issue提出，在标记应用white-space: pre可能不会有很好的成果，能够尝试text-space-collapse: preserve-spaces和text-space-trim: discard-after一起应用，更能达到想要的成果，感兴趣的请移步 issue 4448和issue 4891

应用list-style-image图像填充标记内容

指定标记图像，当列表项内容失常时，用指定图像填充列表项的标记。

list-style-image 失常取值 <image> | none，未定义状况下是 none，作用在列表项list-items下。其中<image>用于指定标记图像的url。参考链接移步

上面是应用例子，将会为<li>标签的标记块填充上指定链接的ellipse.png图像

li { list-style-image: url("http://www.example.com/ellipse.png") }

应用list-style-type文本类型填充标记内容

指定标记字符串，当列表项内容失常时，用指定字符串填充列表项的标记。

list-style-type 失常取值 <counter-style> | <string> | none，未定义状况下是 disc(圆形标记符)，作用在列表项list-items下。参考链接移步

<counter-style>是CSS 定义的计数器款式，容许开发者自定义counter的款式。比方：

@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " ";}ul {  list-style-type: thumbs;}

具体<counter-style>定义规定参考

上面是对于list-style-type的应用例子(如果作用元素不是列表元素，则元素的display必须设置为list-item)

ul { list-style-type: "★"; } // 应用"★"作为标记符p.note { // 如果作用元素不是列表元素，则元素的display必须设置为list-item  display: list-item;  list-style-type: "Note: ";  list-style-position: inside;}ol { list-style-type: upper-roman; } // 定义为罗马数字的大写模式ul { list-style-type: symbols(cyclic '○' '●'); } // 标记符在'○'和'●'之间切换ul { list-style-type: none; } // 不显示标记

留神

::marker伪元素标记不是所有浏览器都反对，包含chrome也只是在80以上版本通过启用experimental Web Platform才反对，如果你想要测试成果，请返回chrome://flags启用experimental Web Platform。并不举荐在理论我的项目去应用这条规定，更举荐应用惯例的做法去设置标记块款式。

总结

列表在前端我的项目中很常见，利用场景也非常宽泛。集体感觉，::marker伪元素是对list-style-image和list-style-text的补充，三者都是定义标记块的填充内容，image重视图像，text重视字符串，::marker则能够定font、color等款式，各具特色。

参考

https://www.w3.org/TR/2020/WD...

https://developer.mozilla.org...::marker