CSS列表模型的marker标记本文主要介绍list-item下的::master伪元素、list-style-image和list-style-type样式属性，以及介绍实际的Howtousein。list-item下还有其他不常见的样式属性，这里不再介绍。有兴趣的可以自行移步CSS标准文档::什么是marker::Marker是一个标记伪元素，可以定义list-item上填充的内容，代表listitem的标识。先附上例子，大家就很清楚了看看它是干什么的。
- zhaodao88.com寻找商机
- zhaodao88.com寻找联系人
- zhaodao88.com寻找购买
效果图：这里marker为元素说明符定义了每个列表项前面的标记，伪元素里面的content内容就是要在列表项前面填充的内容。使用::marker填充标记内容时需要注意的是，如果普通元素要使用标记，必须定义为display:list-item，list-items在创建时会自动生成标记和计数器.可以使用list-style-type和list-style-image属性或直接使用::marker伪元素来设置标记样式的样式。一个例子如下所示。使用::marker伪元素来控制标记。伪元素的内容就是标记
zhaodao88.com找商机
zhaodao88.com找采购zhaodao88.com找联系人
效果如图：当然你也可以为标记设置字体样式、颜色等属性，类似上面的效果li::marker{color:blue;字体粗细：粗体；}值得注意的是：目前只有以下属性可以应用于marker伪元素上的所有字体样式：font-relatedwhite-spaceattributecolorattributetext-combine-upright,unicode-bidi,directionattribute,contentattribute，所有动画和过渡属性都有问题。在标记中使用white-space:pre可能不会有很好的效果。你可以试试text-space-collapse:preserve-spaces和text-space-trim:Discard-after一起使用可以达到想要的效果。有兴趣的请移步issue4448和issue4891。使用list-style-image图片填充mark内容，指定mark图片。当列表项的内容为normal时，用指定的图像填充列表项的标记。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的正常值为|<字符串>|没有任何。如果未定义，则为圆盘（圆形标记），在列表项list-items下使用。参考链接移动是CSS定义的计数器样式，允许开发者自定义计数器的样式。例如：@counter-stylethumbs{system:cyclic;符号：“\1F44D”；suffix:"";}ul{list-style-type:thumbs;}具体的定义规则参考下面关于list-usingstyle-type的例子（如果活动元素不是列表元素，则元素的显示必须设置为list-item)ul{list-style-type:"★";}//使用“★”作为标记p.note{//如果作用元素不是列表元素，则该元素的显示必须设置为list-itemdisplay:list-item;列表样式类型：“注意：”；list-style-position:inside;}ol{list-style-type:upper-roman;}//定义为罗马数字的大写形式ul{list-style-type:symbols(cyclic'○''●');}//'○'和'●'之间的标记在ul{list-style-type:none;之间切换}//不显示标记注意::marker伪元素标签不是所有浏览器都支持，包括chrome，80以上版本启用实验性Web平台才支持，如果想测试效果，去chrome://flags以启用实验性Web平台。实际项目中不建议使用该规则，建议使用常规方法设置标记块的样式。摘要列表在前端项目中非常常见，应用场景非常广泛。个人认为::marker伪元素是对list-style-image和list-style-text的补充，它们都定义了标记块的填充内容，image以图片为主，text以字符串为主，::标记可以定义字体、颜色等样式，各有特点。参考https://www.w3.org/TR/2020/WD...https://developer.mozilla.org...::marker
