::marker 伪元素可用于自定义列表标记的颜色、字体等样式，如设置红色加粗数字或项目符号；但不支持 content 属性，无法直接插入自定义符号或计数内容，需改用 list-style: none 配合 ::before 实现复杂效果；对于有序列表的计数定制，应使用 counter-increment 与 ::before 结合；嵌套列表中可通过层级选择器调整不同层的标记样式，提升可读性。
CSS 的 ::marker 伪元素允许我们自定义列表项前的标记符号，比如有序列表（
- ）中的数字或无序列表（
- 元素前面的标记变成红色加粗。适用于
用 content 模拟自定义符号（仅限简单场景）
::marker 不支持 content 属性，不能像
::before那样直接插入文本或图标。但可以通过其他方式间接实现类似效果。立即学习“前端免费学习笔记（深入）”；
若想使用自定义符号（如 ✓、★），建议改用
::before并配合display: list-item或取消默认列表样式：ul.custom { list-style: none; padding-left: 0;}ul.custom li {position: relative;padding-left: 20px;}
ul.custom li::before {content: "★";color: gold;position: absolute;left: 0;}
这种方法更灵活，虽然不再使用
::marker，但在需要图标或复杂符号时是标准做法。
九歌 九歌–人工智能诗歌写作系统
322 查看详情 
控制有序列表的计数样式
虽然
::marker本身不能修改计数逻辑，但结合counter-reset和counter-increment可以实现高级定制。ol { counter-reset: step-counter; list-style: none;}ol li {counter-increment: step-counter;}
ol li::marker {content: counters(step-counter, ".") ". ";color: blue;}
注意：上述
content写法在::marker中无效 —— 因为::marker不支持content。正确做法是使用::before来显示自定义计数：ol li::before { content: counter(step-counter) ". "; color: blue;}适配不同层级列表的样式
嵌套列表中，
::marker会自动继承默认行为（如数字、字母、罗马数字）。可通过选择器分别设置不同层级的样式：/* 第一层 */ol > li::marker { color: #2c3e50; font-size: 1.1em;}/ 第二层 /ol ol > li::marker {color: #7f8c8d;font-variant-numeric: tabular-nums;}
这样可以让深层列表的标记更小或颜色更浅，增强可读性。
基本上就这些。::marker 适合做颜色、字体等简单修饰，复杂自定义建议搭配
list-style: none和::before实现。不复杂但容易忽略的是它对content的限制。以上就是如何通过css ::marker自定义不同列表样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032809.html
）中的圆点。通过它，可以轻松改变颜色、大小、内容等样式，而无需修改 HTML 结构。
改变默认标记的颜色和字体
使用 ::marker 可以为标记设置颜色、字体粗细等基本样式，不影响列表项其余内容。
li::marker { color: #e74c3c; font-weight: bold;}
上面代码会让所有
微信扫一扫 
支付宝扫一扫 
