CSS 列表模型之marker标记的使用

这篇文章主要介绍了CSS 列表模型之marker标记的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档

::marker 是什么

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

  li::marker { content: "(" counter(list-item) ")"; } li { display: list-item; } 
 
zhaodao88.com 找商机
zhaodao88.com 找人脉
zhaodao88.com 找采购

效果图：

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

使用::marker填充标记内容

需要注意的是，普通元素要想使用marker，必须将元素定义成display: list-item，list-items在创建的时候会自动生成marker和counter。

标记的样式可以使用list-style-type和 list-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。

用::marker伪元素对标记进行控制，伪元素内content的内容就是标记符的内容

  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; } 
zhaodao88.com 找商机
zhaodao88.com 找采购
zhaodao88.com 找人脉

效果如图:

当然也可以为标记设置字体样式、颜色等属性，类似上面效果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 正常取值 | none，未定义情况下是 none，作用在列表项list-items下。其中用于指定标记图像的url。参考链接移步

下面是使用例子，将会为

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

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

 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; } // 不显示标记