这篇“CSS 列表模型之marker标记的使用方法”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“CSS 列表模型之marker标记的使用方法”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。
成都创新互联专注于大埔企业网站建设,
响应式网站开发,
电子商务商城网站建设。大埔网站建设公司,为大埔等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，
成都创新互联专业和态度为您提供的服务
::marker 是什么
::marker是一个标记伪元素，能够定义内容填充在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的内容就是标记符的内容
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。参考链接移步
下面是使用例子，将会为ellipse.png图像
li { list-style-image: url("http://www.example.com/ellipse.png") }使用list-style-type文本类型填充标记内容
指定标记字符串，当列表项内容正常时，用指定字符串填充列表项的标记。
list-style-type 正常取值 | | none，未定义情况下是disc(圆形标记符)，作用在列表项list-items下。参考链接移步
counter的样式。比如：
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
ul {
list-style-type: thumbs;
}具体
下面是关于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。并不推荐在实际项目去使用这条规则，更推荐使用常规的做法去设置标记块样式。
以上是“CSS 列表模型之marker标记的使用方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享文章：CSS列表模型之marker标记的使用方法-创新互联
分享路径：
http://cdkjz.cn/article/dhsjhc.html
