li::marker 可靠设置 color、font-size、font-weight、text-shadow 和 content（仅限 counter() 或字符串，部分浏览器限制严）；不支持 background、border、margin、padding、display 等布局属性，且依赖 display: list-item、父为 ol/ul、无 list-style: none 干扰。
li::marker 能改什么、不能改什么
直接写 li::marker { color: red; font-size: 1.4em; } 是最常用且稳定生效的操作，现代浏览器（Chrome 86+、Firefox 68+、Safari 15.4+）都支持。但别指望它能加背景、边框或内边距——这些属性会被浏览器静默忽略，连 DevTools 里都不会报错，只显示为划掉的样式。
真正能可靠设置的只有：color、font-size、font-family、font-weight、text-shadow；content 仅在配合 counter() 时部分有效（比如有序列表），对无序列表的圆点写 content: "→ " 大概率没反应。
- 想让数字变蓝加大？✅ 直接设
color和font-size - 想给圆点加红色背景？❌ 不行，得换方案
- 想把 “1.” 换成 “第1章：”？⚠️
content: "第" counter(list-item) "章："在 Safari 15.4+ 和新版 Chrome/Firefox 中可行，但旧环境会彻底失效
为什么写了 li::marker 却没效果
不是代码错了，而是三个隐性条件没满足：
-
li的display必须是list-item（默认值），如果父容器是display: flex或你手动设了display: block，::marker就不触发 - 父级必须是
ol或ul，如果是div > li，需手动加counter-reset和counter-increment才有编号上下文 - 外层规则用了
!important强制list-style: none，会直接压制::marker渲染
验证方式：打开 DevTools → 选中 li → 看 Styles 面板里 ::marker 规则是否被划掉。被划掉 = 不支持 or 被覆盖。
需要兼容老浏览器时怎么稳住样式
当目标环境包含 Safari 15.3、Chrome 80 或更低版本时，::marker 会被静默忽略，必须退回到伪元素方案：
- 先清除原生标记：
list-style: none - 用
::before生成内容，配合counter-increment实现序号逻辑 - 通过
position: absolute或display: inline-block + width + margin-left控制符号位置，避免文字错位
示例关键片段：
ol.custom { counter-reset: item; list-style: none; }<br>ol.custom li { position: relative; padding-left: 2.5em; }<br>ol.custom li::before { content: counter(item) "."; counter-increment: item; position: absolute; left: 0; color: #dc2626; }
调整符号和文字之间的间距
::marker 本身不支持 margin 或 padding，所以不能靠它调间距。实际可用的方法只有两个：
- 对
li设padding-left，再配list-style-position: inside，让符号随文字一起缩进 - 用
text-indent让文字相对符号右移（符号不动），适合固定宽度符号场景
注意：list-style-position: outside（默认）会让符号脱离文本流，此时微调对齐只能靠负 text-indent 或 margin-left，容易在不同字体下偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
